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)