vue父子组件v-model传值
Posted 李斌的BLOG
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue父子组件v-model传值相关的知识,希望对你有一定的参考价值。
记录三种常用的父子组件传值
1、常规用法
(1)父组件传值给子组件,通过props接收父组件的传的值。子组件传值给父组件,通过$emit()事件分发向父组件传值。
父组件中 定义:isDomDialog传值 :
<DomDialog :isDomDialog="isDomDialog" @getValue="getVal"></DomDialog>
子组件中接收:
props:
isDomDialog:type: Boolean,
,
data()
return
dialogVisible:false,
,
watch:
isDomDialog(val)
this.dialogVisible = val
,
子组件传值$emit():
methods:
// 关闭弹窗触发
confrim()
this.$emit('getValue',false)
,
父组件@getValue="getVal"接收:
methods:
getVal(val)
this.isDomDialog = val
,
2、父子组件的v-model传值
(1)先看官方文档
(2)在父组件中:
<DomDialog v-model="isDomDialog"></DomDialog>
等同于如下常规写法:
<DomDialog v-bind:value="isDomDialog" v-on:input="isDomDialog=$event"></DomDialog>
或者
<DomDialog :value="isDomDialog" @input="isDomDialog=$event"></DomDialog>
(3)在子组件中的接收与传值:
props:
value:type: Boolean,,
,
data()
return
dialogVisible:false,
,
watch:
value(val)
this.dialogVisible = val
,
,
methods:
// 关闭弹窗触发
confrim()
this.$emit('input',false) // 通过 this.$emit() 向父组件传值
,
3、父子组件通信refs和refs和refs和parent
(1)在父组件中html代码:
<el-button @click="clickedBut">点击</el-button>
<DomDialog ref="child"></DomDialog>
js代码通过$refs调用子组件:
data()
return
parentData:'111',
,
components:DomDialog,
methods:
clickedBut()
this.$refs.child.dialogVisible = true // 给子组件声明的变量dialogVisible赋值
this.$refs.child.handle() // 调用子组件的 handle() 方法
,
parentHandle()
alert("成功调用父组件方法")
,
(2)在子组件中js代码,通过$parent调用父组件:
data()
return
dialogVisible:false,
,
methods:
// 关闭弹窗触发
confrim()
this.dialogVisible = false
this.$parent.parentData = "123456" // 改变父组件声明的变量parentData
this.$parent.parentHandle() // 调用父组件的 parentHandle() 方法
,
handle()
alert("成功调用子组件方法!")
,
以上是关于vue父子组件v-model传值的主要内容,如果未能解决你的问题,请参考以下文章
vue 自定义组件 v-model双向绑定 父子组件同步通信