vue父子組件通訊高級用法

vue項目的一大亮點就是組件化。使用組件能夠極大地提升項目中代碼的複用率，減小代碼量。可是使用組件最大的難點就是父子組件之間的通訊。

子通訊父

父組件

<template>
  <div class="parent">
    我是父組件
    <!--父組件監聽子組件觸發的say方法，調用本身的parentSay方法-->
    <!--經過:msg將父組件的數據傳遞給子組件-->
    <children :msg="msg" @say="parentSay"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
      msg: 'hello, children'
    }
  },
  methods: {
      // 參數就是子組件傳遞出來的數據
      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屬性傳遞進來的數據
      props: {
          msg: {
              type: String,
              default: () => {
                  return ''
              }
          }
      },
      data () {
        return {
            childrenSay: 'hello, parent'
        }
      },

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

子組件使用$emit方法調用父組件的方法，達到子通訊父的目的。

父通訊子

父組件

<!--Html-->
<template>
   <!--父組件觸發click方法-->
  <div class="parent" @click="say">
    我是父組件
    <!--經過ref標記子組件-->
    <children ref="child"></children>
  </div>
</template>

<script>
import Children from './children.vue'
export default {
  data () {
    return {
        msg: "hello,my son"
    }
  },
  methods: {
      // 經過$refs調用子組件的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: {
          // 父組件調用的JavaScript方法parentSay
          parentSay(msg){
              this.msg = msg;
          }
      }
  }
</script>

父組件經過$refs調用子組件的方法。
以上就是父子組件通訊的方式，父子組件傳遞數據直接用props，或者使用$emit和$refs依靠事件來傳遞數據。

父子組件通訊提高篇

上文中，子通訊父是在子中觸發點擊事件而後調用父組件的方法，父通訊子是在父中觸發點擊事件調用子組件的方法。可是實際狀況中可能存在子通訊父時子組件不容許有點擊事件而事件在父中或者父通訊子時點擊事件在子組件中。

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

這種狀況其實很常見，例如提交一個表單時表單的內容爲子組件，而保存按鈕在父組件上。此時點擊保存按鈕想要獲取子組件表單的值。這種狀況下已經不僅僅是子通訊父和父通訊子了，須要將二者結合在一塊兒使用才能完成整個通訊過程。

實現的思路是在父組件中點擊事件時，先經過父子通訊調用子組件的方法，而後在子組件中的該方法裏使用子父通訊調用父組件的另外一個方法並將信息傳遞回來。如下是代碼演示：

父組件

<template>
  <div class="parent" @click="getData">
    我是父組件
    <!--父組件監聽子組件觸發的transData方法，調用本身的transData方法-->
    <!--經過ref標記子組件-->
    <children ref="child" @transData="transData"></children>
  </div>
</template>

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

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

子組件

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

  </div>
</template>

<script>

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

另外一種狀況思路也和這個同樣，基礎就在與父通訊子和子通訊父的靈活運用。
轉評贊就是最大的鼓勵