Vue自定义组件通过v-model指令控制组件的隐藏、显示

雨点打透心脏的1/2处 2022-10-23 15:28 174阅读 0赞

**在开发项目的过程中，我们通常会有自定义组件的时候，那么在自定义组件后，我们如何去对组件进行类似于常用的UI组件库里面那些通过v-model来展示、隐藏组件的功能效果呢？好吧~接下来我直接上代码**

（1）新建一个叫`child.vue`的vue组件文件，内容如下：

<template>
        <div class="tips_wrap" v-if="showChild">
    		我是自定义组件child
        </div>
    </template>
    <script>
    export default { 
        model: { 
            prop: 'showChild'
        },
        props: { 
            showChild: { 
                type: Boolean,
                default: true
            }
        },
        methods: { 
            closeChild() { 
                this.$parent.showChild= !this.$parent.showChild
                // 或者可以这样写,子组件用input事件传递值，父组件直接用v-model里面的属性进行接收
                this.$emit('input', false)
            }
        }
    }
    </script>

（2）将这个组件注册在全局，方便直接使用，也可以不注册，在`main.js`文件里面引入并注册：

// 引入自定义组件
    import Child from '@/components/Child'
    // 注册自定义组件
    Vue.component('Child', Child)

（3）在父组件文件里面写入`Child`组件，并加上`v-model="showChild"`：

<template>
    	<Child v-model="showChild"></Child>
    </template>
    <script>
    export default { 
        data() { 
        	return { 
    			showChild: true
    		}
        }
    }
    </script>

好了，到此实现自定义组件通过`v-model`指令控制组件的隐藏、显示

发表评论取消回复

表情：

评论列表（有 0 条评论，174人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue子组件的显示与隐藏

文章目录 [Vue子组件的显示与隐藏][Vue] [第一步使用v-show][_v-show] [

左手的ㄟ右手/ 2023年03月02日 15:56/ 0 赞/ 23 阅读

相关 vue使用之自定义指令、组件开发和组件通讯

vue使用之自定义指令、组件开发和组件通讯 vue使用之自定义指令、组件开发和组件通讯 1 自定义指令 1.1 自定义指令-钩子函数

傷城~/ 2023年02月24日 15:30/ 0 赞/ 25 阅读

相关 vue通过自定义指令控制不同角色页面显示什么按钮

main.js中引入import ‘./plugins/button-check.js’ button-check.js’ import Vue from "vue

快来打我*/ 2022年11月12日 01:47/ 0 赞/ 292 阅读

相关 Vue自定义组件通过v-model指令控制组件的隐藏、显示

在开发项目的过程中，我们通常会有自定义组件的时候，那么在自定义组件后，我们如何去对组件进行类似于常用的UI组件库里面那些通过v-model来展示、隐藏组件的功能效果呢？好吧~接

雨点打透心脏的1/2处/ 2022年10月23日 15:28/ 0 赞/ 175 阅读

相关 vue 通过.sync控制显示隐藏

父组件 <dialog-item :visible.sync="visible"></dialog-item> visible: false, 子

ゝ一世哀愁。/ 2022年10月19日 05:33/ 0 赞/ 26 阅读

相关 vue自定义组件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

客官°小女子只卖身不卖艺/ 2022年09月09日 11:45/ 0 赞/ 310 阅读

相关 vue自定义组件

一、无参组件首先利用VUE-CLI创建一个vue项目（不用vue-cli也行此处只是原来建立好了，方便演示） ![在这里插入图片描述][watermark_

- 日理万妓/ 2022年09月02日 13:00/ 0 赞/ 298 阅读

相关 Vue自定义组件

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

港控/mmm°/ 2022年07月12日 14:51/ 0 赞/ 311 阅读

相关 Vue子组件的显示与隐藏

文章目录 Vue子组件的显示与隐藏第一步使用v-show 1.1 父组件 1.2 子组件 2

水深无声/ 2022年04月24日 03:48/ 0 赞/ 1360 阅读

相关自定义组件鼠标移入显示/隐藏组件思路

刚出来时候做这种类似的效果，都是通过 css hover 效果，把组件包在父级中，通过父级的 hover 事件，来控制里面子级的显示与隐藏。这样使用，一：如果是

╰+攻爆jí腚メ/ 2021年11月16日 08:34/ 0 赞/ 930 阅读