记录三种常用的父子组件传值

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("成功调用子组件方法！")
    }
  },