vue項目的一大亮點就是組件化。使用組件可以極大地提高項目中代碼的復(fù)用率，減少代碼量。但是使用組件最大的難點就是父子組件之間的通信。

子通信父

父組件

<template>
  <div class="parent">
    我是父組件
    <!--父組件監(jiān)聽子組件觸發(fā)的say方法，調(diào)用自己的parentSay方法-->
    <!--通過:msg將父組件的數(shù)據(jù)傳遞給子組件-->
    <children :msg="msg" @say="parentSay"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },
  methods: {
      // 參數(shù)就是子組件傳遞出來的數(shù)據(jù)
      parentSay(msg){
          console.log(msg) // hello, parent
      }
  },

  // 引入子組件
  components:{
      children: Children
  }
}
</script>

子組件

<template>
  <div class="hello">
    <div class="children" @click="say">
      我是子組件
      <div>
        父組件對我說：{{msg}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      //父組件通過props屬性傳遞進(jìn)來的數(shù)據(jù)
      props: {
          msg: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

      methods: {
          // 子組件通過emit方法觸發(fā)父組件中定義好的函數(shù)，從而將子組件中的數(shù)據(jù)傳遞給父組件
          say(){
              this.$emit('say' , this.childrenSay);
          }
      }
  }
</script>

子組件使用$emit方法調(diào)用父組件的方法，達(dá)到子通信父的目的。

父通信子

父組件

 <!--Html-->
<template>
   <!--父組件觸發(fā)click方法-->
  <div class="parent" @click="say">
    我是父組件
    <!--通過ref標(biāo)記子組件-->
    <children ref="child"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
        msg: "hello,my son"
    }
  },
  methods: {
      // 通過$refs調(diào)用子組件的parentSay方法
      say(){
         this.$refs.child.parentSay(this.msg);
      }
  },

  // 引入子組件
  components:{
      children: Children
  }
}
</script>

子組件

<template>
  <div class="hello">
    <div class="children" >
      我是子組件
      <div>
        父組件對我說：{{msg}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      data () {
        return {
            msg: ''
        }
      },

      methods: {
          // 父組件調(diào)用的JavaScript方法parentSay
          parentSay(msg){
              this.msg = msg;
          }
      }
  }
</script>

父組件通過$refs調(diào)用子組件的方法。
以上就是父子組件通信的方式，父子組件傳遞數(shù)據(jù)直接用props，或者使用$emit和$refs依靠事件來傳遞數(shù)據(jù)。

父子組件通信提升篇

上文中，子通信父是在子中觸發(fā)點擊事件然后調(diào)用父組件的方法，父通信子是在父中觸發(fā)點擊事件調(diào)用子組件的方法。但是實際情況中可能存在子通信父時子組件不允許有點擊事件而事件在父中或者父通信子時點擊事件在子組件中。

子通信父時擊事件在父組件

這種情況其實很常見，例如提交一個表單時表單的內(nèi)容為子組件，而保存按鈕在父組件上。此時點擊保存按鈕想要獲取子組件表單的值。這種情況下已經(jīng)不單單是子通信父和父通信子了，需要將兩者結(jié)合在一起使用才能完成整個通信過程。

實現(xiàn)的思路是在父組件中點擊事件時，先通過父子通信調(diào)用子組件的方法，然后在子組件中的該方法里使用子父通信調(diào)用父組件的另一個方法并將信息傳遞回來。以下是代碼演示：

父組件

<template>
  <div class="parent" @click="getData">
    我是父組件
    <!--父組件監(jiān)聽子組件觸發(fā)的transData方法，調(diào)用自己的transData方法-->
    <!--通過ref標(biāo)記子組件-->
    <children ref="child" @transData="transData"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },
  methods: {
      getData(){
          // 調(diào)用子組件的getData方法
          this.$refs.child.getData();
      },
      // 參數(shù)就是子組件傳遞出來的數(shù)據(jù)
      transData(msg){
          console.log(msg) // hello, parent
      }
  },

  // 引入子組件
  components:{
      children: Children
  }
}
</script>

子組件

<template>
  <div class="hello">
    <div class="children" >
      我是子組件
      <div>
        子組件的數(shù)據(jù)：{{childrenSay}}
      </div>
    </div>

  </div>
</template>

<script>

  export default {
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },
      methods: {
          // 子組件通過emit方法觸發(fā)父組件中定義好的函數(shù)，從而將子組件中的數(shù)據(jù)傳遞給父組件
          getData() {
              this.$emit('transData' , this.childrenSay);
          }
      }
  }
</script>

另一種情況思路也和這個一樣，基礎(chǔ)就在與父通信子和子通信父的靈活運用。
轉(zhuǎn)評贊就是最大的鼓勵