Vue父子組件通信——prop和$emit

總結

1）父組件通過子組件的prop屬性，將數據傳送給子組件
   （代碼第三行的cityName就是子組件的屬性）
2）子組件通過$emit監測父組件中的事件（代碼最后一行）

3）兄弟組件傳值san

　　還是通過 $emit 和 props 結合的方式

父組件

<template>
  <div id="father">
    <son  @btnClick="handleClick" :cityName="msg"></son>
  </div>
</template>

<script>
  import son from './components/son'

  export default {
    el: '#father',
    data() {
      return {
        msg: ''      //  要傳給子組件的數據
      }
    },
    methods: {
      handleClick() {
        this.msg = '北京'   //  點擊按鈕時觸發函數，顯示hello
      }
    },
    components: {
      'son': son
    }
  }
</script>

子組件

<template>
  <div>
    <button @click="sendCity">點擊</button>
    <h1>父組件傳過來的數據是：{{cityName}}</h1>
  </div>
</template>

<script>
  export default {
    props: ['cityName'],   //  子組件的自定義屬性
    methods: {
      sendCity() {
        this.$emit('btnClick');   //  使用$emit()監測btnClick事件
      }
    }
  }
</script>

 兄弟組建傳值

 在父組件中給要傳值的兩個兄弟組件都綁定要傳的變量，並定義事件

// 父組件
<child-a :myName="name" />
<child-b :myName="name" @changeName="editName" />  
    
export default {
    data() {
        return {
            name: 'John'
        }
    },
    components: {
        'child-a': ChildA,
        'child-b': ChildB,
    },
    methods: {
        editName(name) {
            this.name = name
        },
    }
}

在子組件B中接收變量和綁定觸發事件

// child-b 組件
<p>姓名：{{ myName }}</p>
<button @click="changeName">修改姓名</button>
    
<script>
export default {
    props: ["myName"],
    methods: {
        changeName() {
            this.$emit('changeName', 'Lily')   // 觸發事件並傳值
        }
    }
}
</script>

// child-a 組件
<p>姓名：{{ newName }}</p>
    
<script>
export default {
    props: ["myName"],
    computed: {
        newName() {
            if(this.myName) { // 判斷是否有值傳過來
                return this.myName
            }
            return 'John' //沒有傳值的默認值
        }
    }
}
</script>

即：當子組件B 通過 $emit() 觸發了父組件的事件函數 editName，改變了父組件的變量name 值，父組件又可以把改變了的值通過 props 傳遞給子組件A，從而實現兄弟組件間數據傳遞。

 

總結：

• 父子通信： 父向子傳遞數據是通過 props，子向父是通過 $emit；通過 $parent / $children 通信；$ref 也可以訪問組件實例；provide / inject ； $attrs/$listeners ；

• 兄弟通信： EventBus；Vuex；

• 跨級通信： EventBus；Vuex；provide / inject ；$attrs/$listeners;