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

目录

• 通过v-model指令控制组件的隐藏、显示
• 1.新建一个叫child.vue的vue组件文件
• 2.将这个组件注册在全局
• 3.在父组件文件里面写入Child组件
• 在组件中实现v-model
• 1.v-model使用的属性和事件
• 2.自定义组件中输入框的v-model
• 3.通过v-model控制组件的显示

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

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

1.新建一个叫child.vue的vue组件文件

内容如下：

2.将这个组件注册在全局

方便直接使用，也可以不注册，在main.js文件里面引入并注册：

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

3.在父组件文件里面写入Child组件

并加上v-model="showChild"：

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

在组件中实现v-model

v-model本质是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

1.v-model使用的属性和事件

v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件

• input输入框（type为text）、textarea元素使用value属性和input事件
• checkbox、radio使用checked属性和change事件
• select下拉框使用value属性和change事件

2.自定义组件中输入框的v-model

在父组件中使用自定义组件myInput，使用v-model传入数据

以上写法相当于如下

v-model是value属性和input事件的语法糖

1、第一种写法

在组件的props中，通过value接收父组件v-model传过来的数据。

在输入时，通过$emit触发input事件，并将当前的输入值传过去，就会在父组件上触发input事件，并将传来的值赋给父组件上的值

2、第二种写法

一般以第一种写法就可以达到目的了。

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。使用model可以改变接收的属性名和抛出的事件名，model 选项可以用来避免这样的冲突

以input（type为text）标签的v-model为例，使用model后：

model: {
    prop: "xxxxx",
    event: "yyyyy",
  },

• 就将原来要接收的value属性改为了xxxxx属性，
• 原来要抛出的input事件，改为了yyyyy事件
• 所以，在props中接收xxxxx属性
• 触发事件时，触发yyyyy事件

此时就相当于如下代码

一个组件中只能写一个输入框，因为v-model只能绑定一个数据；

如果想写一个组件，在组件内有多个输入框，就只能传一个对象给子组件了。

3.通过v-model控制组件的显示

在一些组件库中，一些组件例如dialog组件，可以通过v-model来控制dialog的显示与隐藏，这是怎么实现的？

isShow控制组件box的显示与否

在box组件中，

• 通过props的value接收v-model传过来的值；
• 定义一个变量showModal，并将value的值同步赋值给它；
• 使用showModal控制组件的显示隐藏；
• 点击box组件时，将showModal设为false，同时触发input事件，并将当前的showModal值传过去；
• 父组件响应input事件，将v-model绑定的值赋值；
• div元素使用的是value属性和input事件（div元素可以变成输入框，它上面存在input事件）

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。