记录三种常用的父子组件传值
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）先看官方文档
v-model.png
（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、父子组件通信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("成功调用子组件方法！")
}
},
