Vue的组件通信：父子传值，兄弟传值

父子组件传递值

父组件：

<template>
  <div>
    <h4>我是父组件</h4>
    子组件传递过来的值：{{ lisiC }}
    <D @lisiD='getVal' :zhangsanC='zhangsanC'></D>
  </div>
</template>

<script>
  /* 
    父组件向子组件传递数据使用自定义属性：
    ①获取子组件： import D from './D.vue'
    ②注册子组件： components: { D },
    ③页面中使用子组件并绑定要传递的值：<D :zhangsanC='zhangsanC'></D>
    ④在子组件使用props获取自定义属性： props: ['zhangsanC'],
  */
  /* 获取子组件 */
  import D from './D.vue'
  export default {
    name: 'C',
    components: {
      /* 注册子组件*/
      D
    },
    props: {},
    data() {
      return {
        zhangsanC: `敢问二位施主，什么是真经？`,
        lisiC: ''
      }
    },
    methods: {
      getVal(val) {
        this.lisiC = val
      }
    }
  }
</script>

子组件

<template>
  <div>
    <h4>我是子组件</h4>
    父组件传递过来的值：{{ zhangsanC }}
  </div>
</template>

<script>
  /* 
    子组件向父组件传递数据使用自定义事件：
    ①在methods中使用$emit（'事件名称'，发送的数据）：this.$emit('lisiD',this.lisiD)
    ②在mounted中调用:this.add()
    ③在父组件触发自定义事件：<D @lisiD='getVal'></D>
    ④注册方法调用数据：getVal(val) {this.lisiD = val}
  */
  export default {
    name: 'D',
    props: ['zhangsanC'],
    data() {
      return {
        lisiD: '所谓真经，就是能够达到寂空涅槃的究竟法门'
      }
    },
    mounted() {
      this.add()
    },
    methods: {
      add(){
        this.$emit('lisiD',this.lisiD)
      }
    }
  }
</script>

兄弟之间传值

eventBus模块

/* 创建eventBus模块，并向外共享一个Vue的实例对象 */
import Vue from 'vue'
export default new Vue()

A组件

<template>
  <div>
    <h4>我是兄弟组件A</h4>
    B组件传递过来的值：{{ xiaohongA }}
  </div>
</template>

<script>
  /* 
   兄弟之间传值：
   ①创建eventBus模块，并向外共享一个Vue的实例对象。
   ②在A组件（数据发送方）调用bus.$emit('事件名称'，要发送的数据)方法触发自定义事件。
   ③在B组件（数据接收方）调用bus.$on('事件名称'，事件处理函数)方法注册一个自定义事件。
  */
  import bus from '../store/eventBus.js'
  export default {
    name: 'A',
    data() {
      return {
        xiaomingA: `美女是魔`,
        xiaohongA:''
      }
    },
    created() {
      bus.$on('xiaohongB',(val) =>{
        this.xiaohongA = val
      })
    },
    mounted() {
      this.send()
    },
    methods: {
      send() {
        bus.$emit('xiaomingA', this.xiaomingA)
      }
    }
  }
</script>

B组件

<template>
  <div>
    <h4>我是兄弟组件B</h4>
    A组件传递过来的值:{{ xiaomingB }}
  </div>
</template>

<script>
  import bus from '../store/eventBus.js'
  export default {
    name: 'B',
    data() {
      return {
        xiaomingB:'',
        xiaohongB:'可悟不可修  '
      }
    },
    created() {
      bus.$on('xiaomingA',(val) => {
        this.xiaomingB = val
      })
    },
    mounted() {
      this.send()
    },
    methods: {
      send(){
        bus.$emit('xiaohongB',this.xiaohongB)
      }
    }
  }
</script>

目录结构

最终效果图