Vue 父子組件通信

子組件與父組件通信

1、通過$emit實現通信

vue2.0只允許單向數據傳遞，我們通過出發事件來改變組件的數據，廢話少說，上乾貨

子組件代碼

<template>
    <div @click="open"></div>
</template>

methods: {
   open() {
        this.$emit('showbox','the msg'); //觸發showbox方法，'the msg'爲向父組件傳遞的數據
    }
}

父組件

<child @showbox="toshow" :msg="msg"></child>
 //監聽子組件觸發的showbox事件,然後調用toshow方法
methods: { toshow(msg) { this.msg = msg; }}

2、v-model實現通信

父組件可以如下寫：

<my-checkbox v-model="haorooms"></my-checkbox>

子組件：

<input 
               type="checkbox"
               <!--這裏就不用 input 了，而是 balabala-->
               @change="$emit('balabala', $event.target.checked)"
               :checked="value"
             />

 export default {
        data(){
            return{
            }
        },
       props: ['checked'], //這裏就不用 value 了，而是 checked
      model: {
          prop: 'checked',
          event: 'balabala'
       },
    }

3、.sync

父組件

<comp :foo.sync="bar"></comp>

當子組件需要更新 foo 的值時，它需要顯式地觸發一個更新事件

this.$emit('update:foo', newValue)