記錄三種常用的父子組件傳值
1、常規(guī)用法
（1）父組件傳值給子組件，通過props接收父組件的傳的值。子組件傳值給父組件，通過$emit()事件分發(fā)向父組件傳值。

父組件中 定義:isDomDialog傳值 ：

<DomDialog :isDomDialog="isDomDialog" @getValue="getVal"></DomDialog>  

子組件中接收：

props:{
    isDomDialog:{type: Boolean,}
},
data(){
    return {
      dialogVisible:false,
    }
},
watch:{
    isDomDialog(val){
      this.dialogVisible = val
    }
},

子組件傳值$emit()：

 methods: {
    // 關(guān)閉彈窗觸發(fā)
    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>    

等同于如下常規(guī)寫法：

<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: {
    // 關(guān)閉彈窗觸發(fā)
    confrim(){
      this.$emit('input',false)         // 通過 this.$emit() 向父組件傳值
    }
  },

3、父子組件通信parent
（1）在父組件中html代碼：

<el-button @click="clickedBut">點(diǎn)擊</el-button>
<DomDialog ref="child"></DomDialog>  

js代碼通過$refs調(diào)用子組件：

data(){
    return{
      parentData:'111',
    }
  },
  components:{DomDialog},
  methods: {
    clickedBut(){
      this.$refs.child.dialogVisible = true        // 給子組件聲明的變量dialogVisible賦值
      this.$refs.child.handle()                    // 調(diào)用子組件的 handle() 方法
    },
    parentHandle() {
      alert("成功調(diào)用父組件方法")
    }
  },

（2）在子組件中js代碼，通過$parent調(diào)用父組件：

data(){
    return {
      dialogVisible:false,
    }
  },
  methods: {
    // 關(guān)閉彈窗觸發(fā)
    confrim(){
      this.dialogVisible = false
      this.$parent.parentData = "123456"   // 改變父組件聲明的變量parentData
      this.$parent.parentHandle()          // 調(diào)用父組件的 parentHandle() 方法
    },

    handle() {
      alert("成功調(diào)用子組件方法！")
    }
  },