vue自定义组件怎么用v model,vue控制组件的显示和隐藏
本文主要介绍vue自定义组件如何通过v-model指令控制组件的隐藏和显示，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。
目录
通过v-model指令控制组件的隐藏和显示。1.创建一个名为Child.vue 2的新vue组件文件。全局注册此组件。3.将子组件写入父组件文件，实现v-model1.v-model 2使用的属性和事件。自定义组件中输入框的垂直模型。3.通过V-Model控制组件的显示。
通过v-model指令控制组件的隐藏、显示
在开发项目的过程中，我们通常会有自定义组件，那么在自定义组件之后，如何通过v-model显示和隐藏类似于常见UI组件库中组件的功能效果呢？好了~接下来，我直接上代码
1.新建一个叫child.vue的vue组件文件
内容如下：
！- child.vue -
模板
div class= tips _ wrap v-if= show child
我是自定义组件，孩子。
/div
/模板
脚本
导出默认值{
型号：{
道具：“showChild”
},
道具：{
showChild: {
类型：布尔型，
默认值：真
}
},
方法：{
closeChild() {
这个。$parent.showChild=！这个。$parent.showChild
//或者可以这样写，子组件用输入事件传递值，父组件用v-model中的属性直接接收。
这个。$emit(input ，false)
}
}
}
/脚本
2.将这个组件注册在全局
直接用很简单，或者不用注册。在main.js文件中引入并注册它：
//引入自定义组件
从“@/components/Child”导入子项
//注册自定义组件
Vue.component(Child ，Child)
3.在父组件文件里面写入Child组件
并添加v-model=showChild :
模板
Child v-model=showChild/Child
/模板
脚本
导出默认值{
data() {
返回{
showChild:没错
}
}
}
/脚本
好了，下面是如何实现自定义组件，通过v-model指令控制组件的隐藏和显示。
在组件中实现v-model
v-model的本质是语法糖，负责监测用户的输入事件来更新数据，针对一些极端场景做一些特殊处理。
1.v-model使用的属性和事件
V-model在内部对不同的输入元素使用不同的属性，并抛出不同的事件。
输入框(类型为text)和textarea元素使用value属性和输入事件复选框，单选按钮使用checked属性和change事件选择下拉框使用value属性和change事件。
2.自定义组件中输入框的v-model
在父组件中使用自定义组件myInput，并使用v-model传入数据。
myInput v-model=name /
上面的文字相当于下面的文字
my-input:value= msg @ input=(e)={ msg=e } /
V-model是值属性和输入事件的语法糖。
1、第一种写法
在组件的props中，父组件v-model传递的数据是按值接收的。
在输入期间，如果输入事件由$emit触发，并且当前输入值被传递，则输入事件将在父组件上触发，并且传递的值将被赋给父组件上的值。
模板
div class=myInput
投入
type=text
:value=value
@input=$emit(input ，$event.target.value)
/
/div
/模板
脚本
导出默认值{
道具：{
值：{}
},
};
/脚本
2、第二种写法
一般用第一种方式写就能达到目的。
默认情况下，组件上V-model将使用适当的命名值和事件命名输入，但是诸如单选按钮框和复选框之类的输入控件可能将值属性用于不同的目的。使用model来更改接收到的属性名和抛出的事件名，model选项可以用来避免这样的冲突。
以输入(类型是文本)标签的v-model为例。使用模型后：
型号：{
道具：
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。