vue - 组件之间的通信

1. 父组件向子组件进行值传递

     子组件通过props属性进行数据接收

     parent.vue

<template>
  <div>
    <Child :data="data"></Child>
  </div>
</template>

<script>
  import Child from './child'
  export default {
    data() {
      return {
        data: 'I am the value in the parent component!'
      }
    },
    components: {
      Child
    }
  }
</script>

   child.vue

<template>
  <div>
    {{data}}
  </div>
</template>

<script>
  export default {
    // 第一种接收方式
    props: ['data']
    // 第二种接收方式，这里定义了接收数据的类型，如果传递的数据不为String格式的，那么会报错
    props: {
      data: String
    } 
    // 第三种接收方式，这里不仅定义了接收数据的类型，同时也定义了默认值，即当父组件没有给子组件进行值传递时，那么会取默认值
    props: {
      data: {
        type: String,
        default: 'child Data'
      }
    }
  }
</script>

2. 子组件向父组件进行值传递

    这里的子组件向父组件进行值传递时，是通过事件的发布和订阅来完成的，如下所示：

    parent.vue

<template>
  <div>
    <Child @showData="showData"></Child>
    {{childData}}
  </div>
</template>

<script>
  import Child from './child'
  export default {
    data(){
      return {
        childData: null
      }
    },
    methods: {
      // 监听showData事件，从而触发showData函数，子组件传递的数据会以showData函数参数的形式来呈现
      showData(data){
        this.childData = data
      }
    },
    components: {
      Child
    }
  }
</script>

    child.vue

<template>
  <div>
    <button @click="sendData()">click me to pass the data to parent component</button>
  </div>
</template>

<script>
  export default {
    data(){
      return {
        data: 'I am the value in the child component!'
      }
    },
    methods: {
      // 点击button触发sendData函数，sendData函数中会发射一个showData事件，从而实现数据的传递
      sendData(){
        this.$emit('showData', this.data)
      }
    }
  }
</script>

3. 非父子组件的数据传递

    非父子组件的数据传递，原理也是通过事件的发布与订阅来完成，

    但这中间需要一个vue实例，从而实现让需要进行传递数据的组件共享一个事件机制，如下实例，将component1组件中的数据传递至components组件中：

    eventVue.js  -   创建的vue实例，从而实现需要进行数据传递的组件共享一个事件机制

import Vue from 'vue'

export default new Vue()

    component1.vue

<template>
  <div>
    <button @click="sendData()">click me to pass the data to another component</button>
  </div>
</template>

<script>
  import eventVue from 'common/js/eventvue'
  export default {
    data(){
      return {
        data: 'I am the value in the another component!'
      }
    },
    methods: {
      sendData(){
        eventVue.$emit('showData', this.data)
      }
    }
  }
</script>

component2.vue

<template>
  <div>
    {{data}}
  </div>
</template>

<script>
  import eventVue from 'common/js/eventvue'
  export default {
    created(){
      this.showData()
    },
    data(){
      return {
        data: null
      }
    },
    methods: {
      showData(data){
        eventVue.$on('showData', (data) => {
          this.data = data
        })
      }
    }
  }
</script>