VUE组件通信及其代码显示

顾名思义，父子组件即组件包含组件，包含为父，被包含为子，而那些互不包含的组件即为兄弟。好了，现在就让我们来一窥父子兄弟之间是怎样的情深意切吧！
一，父>子组件通信——老父亲对儿子的关爱！

1，打开子组件，在js中给其一个props：[ ’ msg ’ ]；

子组件内容如图：
2，打开父组件，在子组件标签里中添加信息；

父组件内容如图：

3，打开浏览器，页面显示如图：

二，子>父组件通信——儿子对父亲的问候！

子组件

1，子组件button按钮添加点击事件；
例：

 <button @click="sendFather">大儿子表达对老父亲的问候</button>

2，在methods里写发送信息事件方法；
例：

methods: {
    sendFather () {
      this.$emit('BigSon', 'Good morning, Dad.I am BigSon.')
    }
  }

其中，

this.$emit('自定义事件名', '自定义发送的信息')

子组件内容如图：

父组件
1，在methods中接收点击后发送过来的信息；

showBig (data) {
      console.log(data)// Good morning, Dad.I am BigSon.
    }

2，在子组件标签中调用事件；

 <BigSon @BigSon="showBig"/>

3，将接收的信息赋值给data中的变量并显示在页面；

  showBig (data) {
      console.log(data)// Good morning, Dad.I am BigSon.
      this.bigSon = data//赋值
    }

默认值：

 data () {
    return {
      bigSon: '点击问候按钮查看大儿子信息'
    }
  }

页面显示：

<p>大儿子发来微信说：{{bigSon}}</p>

父组件内容如图：

浏览器效果如图：
点击前：

点击后：

三，兄<=>弟组件通信——手足情深！

1,首先建一个事件总线；
例：在src/assets/下创建一个eventBus.js，
代码：

import Vue from 'Vue';
export default new Vue;

如图：

2,需要相互通信的组件中分别导入；
代码：

  import eventBus from '../assets/eventBus'

如图：

3，发送数据的组件中添加按钮并绑定点击事件发送数据；
代码：

 <button @click="sendBrother">对弟弟表达亲切的问候</button>

 sendBrother () {
        eventBus.$emit('BigSon', '见过舍弟！')
      }

如图：

4，接收数据组件中接收数据并显示在标签；
代码：

<p>哥哥说：{{data}}</p>

eventBus.$on('BigSon', data => {
        this.data = data
      })

如图：

完整代码如图：
父组件：

<template>
  <div>
    <h1>Father</h1>
    <p>大儿子发来微信说：{{bigSon}}</p>
    <p>小儿子发来微信说：{{smallSon}}</p>
    <BigSon msg="Good morning,my bigSon." @BigSon="showBig"/>
    <SmallSon msg="Good morning,my smallSon." @SmallSon="showSmall"/>
  </div>
</template>

<script>
import BigSon from './BigSon'
import SmallSon from './SmallSon'

export default {
  data () {
    return {
      bigSon: '点击问候按钮查看大儿子信息',
      smallSon: '点击问候按钮查看小儿子信息'
    }
  },
  components: {
    BigSon,
    SmallSon
  },
  methods: {
    showBig (data) {
      console.log(data)// Good morning, Dad.I am BigSon.
      this.bigSon = data//赋值
    },
    showSmall (data) {
      console.log(data)// Good morning, Dad.I am SmallSon.
      this.smallSon = data// 赋值
    }
  }
}
</script>

<style lang="scss" scoped>
  div {
    width: 1000px;
    height: 700px;
    border: rebeccapurple 3px solid;
    margin: 50px auto;
    text-align: center;
    background: royalblue;

    p {
      width: 450px;
      margin: 10px auto;
      background: skyblue;
      text-align: left;
      padding-left: 5px;
    }
  }
</style>

兄组件：

<template>
  <div>
    <h1>BigSon</h1>
    <p>父亲说：{{msg}}</p>
    <p>弟弟说：{{data}}</p>
    <button @click="sendFather">对父亲表达亲切的问候</button>
    <button @click="sendBrother">对弟弟表达亲切的问候</button>
  </div>
</template>

<script>
  import eventBus from '../assets/eventBus'
  export default {
    data(){
      return{
        data:'即将接收弟弟发送的信息',
      }
    },
    props: ['msg'],
    methods: {
      sendFather () {
        this.$emit('BigSon', 'Good morning, Dad.I am BigSon.')
      },
      sendBrother () {
        eventBus.$emit('BigSon', '见过舍弟！')
      },
    },
    mounted () {
      eventBus.$on('SmallSon',data=>{
        this.data=data
      })
    }
  }
</script>

<style lang="scss" scoped>
  div {
    width: 300px;
    height: 300px;
    border: rosybrown 3px solid;
    margin: 80px;
    text-align: center;
    background: aqua;
    display: inline-block;
    button {
      height: 30px;
      background: skyblue;
      color: royalblue;
      font-weight: bold;
      font-size: 18px;
      font-family: 华文行楷;
      margin-top: 20px;
    }
  }
</style>

弟组件：

<template>
  <div>
    <h1>SmallSon</h1>
    <p>父亲说：{{msg}}</p>
    <p>哥哥说：{{data}}</p>
    <button @click="sendFather">表达对父亲表达的问候</button>
    <button @click="sendBrother">对哥哥表达亲切的问候</button>
  </div>
</template>

<script>
  import eventBus from '../assets/eventBus'
  export default {
    data () {
      return {
        data: '即将接收哥哥发送的信息'
      }
    },
    props: ['msg'],
    methods: {
      sendFather: function () {
        this.$emit('SmallSon', 'Good morning, Dad.I am SmallSon.')
      },
      sendBrother: function () {
        eventBus.$emit('SmallSon', '见过长兄！')
      }
    },
    mounted () {
      eventBus.$on('BigSon', data => {
        this.data = data
      })
    }
  }
</script>

<style lang="scss" scoped>
  div {
    width: 300px;
    height: 300px;
    border: rosybrown 3px solid;
    margin: 80px;
    text-align: center;
    background: aquamarine;
    display: inline-block;

    button {
      height: 30px;
      background: skyblue;
      color: royalblue;
      font-weight: bold;
      font-size: 18px;
      font-family: 华文行楷;
      margin-top: 20px;

    }
  }
</style>

总线：

import Vue from 'Vue';
export default new Vue;

完整效果如图；
点击前：

点击后：

结语：如果有错误或不足，恳请指出。如果有用的话，请多多点赞和关注吧，谢谢了！