vue 父子組件間通訊

對於初學vue的同窗，遇到的一個問題就是父子組件間如何通訊。父組件調用一個子組件，父組件的屬性如何可以傳遞給子組件使用，子組件裏的數據如何能傳遞給父組件？下面咱們經過一個demo來解答這個問題。

父組件

<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>

結果

總結

vue的父子組件間通訊能夠總結成一句話：
父組件經過 prop 給子組件下發數據，子組件經過$emit觸發事件給父組件發送消息，即 prop 向下傳遞，事件向上傳遞。