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;