Vue事件总线、组件之间的传值

父组件向子组件传值

（1）第一个就是要明白怎么在父页面中向子组件中传值？

你可以给子组件传入一个静态的值：

但我们一般都是需要传动态的值，所以需要v-bind绑定：

当然，你传的值可以是数字、对象、数组等等，参见vue官网

（2）第二个就是要知道如何在子组件中接受父页面传过来的值，有几点需要了解：

组件实例的作用域是孤立的;

子组件要显式的用props选项声明它预期的数据，如：

// 某个子组件中：
export default {
  props: {
    title: {
      type: String,
      default: 'hello world'
    }
  }
}

以上就是单向数据流的一般表现了： 父级 prop 的更新会向下流动到子组件中，但是反过来则不行。

子组件向父组件传值

那么我们延伸一下，子组件怎么向父组件传值？

（1）基本概念

在Vue中，父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息

每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件。另外，父组件可以在使用子组件的地方直接用v-on来监听子组件触发的事件。

（2）举例说明：

父组件在组件上定义了一个自定义事件childFn，事件名为parentFn用于接受子组件传过来的message值

<!-- 父组件 -->
<template>
    <div class="test">
      <test-com @childFn="parentFn"></test-com>
      <br/> 
      子组件传来的值 : {{message}}
    </div>
</template>

<script>
export default {
    // ...
    data: {
        message: ''
    },
    methods: {
       parentFn(payload) {
        this.message = payload;
      }
    }
}
</script>

子组件是一个buttton按钮，并为其添加了一个click事件，当点击的时候使用$emit()触发事件，把message传给父组件。

<!-- 子组件 -->
<template> 
<div class="testCom">
    <input type="text" v-model="message" />
    <button @click="click">Send</button>
</div>
</template>
<script>
export default {
    // ...
    data() {
        return {
          // 默认
          message: '我是来自子组件的消息'
        }
    },
    methods: {
      click() {
            this.$emit('childFn', this.message);
        }
    }    
}

这样我们就基本实现了子组件向父组件发送值了。

vue中组件就是一个对象

template：表示组件使用的模板，只能有一个根节点

components注册一个局部组件

Vue.component('myCom2', {
        template: '<h3>这是直接用 Vue.component 创建出来的组件</h3>',
      });
      //<my-com2></my-com2>

什么是事件总线？
在vue开发中我们通过new关键字创建一个空白的vue实例，所有的事件派发和监听都通过此实例进行。

实现全局事件总线对象的几种方式

1.大概思路是 ：在main.js，也就是入口文件中，我们在vue的原型上添加一个bus对象；

下面的组件A和组件B可以是项目中任意两个组件

//在mian.js中
Vue.prototype.bus = new Vue()  //这样我们就实现了全局的事件总线对象

//组件A中，监听事件
this.bus.$on('updata', function(data) {
    console.log(data)  //data就是触发updata事件带过来的数据
})

//组件B中，触发事件
this.bus.$emit('updata', data)  //data就是触发updata事件要带走的数据

2.大概的实现思路： 新建一个bus.js文件， 在这个文件里实例化一下vue；然后在组件A和组件B中分别引入这个bus.js文件，将事件监听和事件触发都挂到bus.js这个实例上，这样就可以实现全局的监听与触发了

bus.js文件

// bus.js文件
import Vue from 'vue'
export default new Vue()

组件A

// 组件A ，监听事件send
<template>
  <div>
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: ''
      }
    },
    created() {
      let _this = this
      // 用$on监听事件并接受数据
      Bus.$on('send', (data) => {
        _this.name = data
        console.log(data)
      })
    },
    methods: {}
  }
</script>

组件B

// 组件B， 触发事件send
<template>
  <div>
    <input type="button" value="点击触发" @click="onClick">
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elValue: '我是B组件数据'
      }
    },
    methods: {
        // 发送数据
      onClick() {
        Bus.$emit('send', this.elValue)
      }
    }
  }
</script>

参考学习

https://cn.vuejs.org/v2/guide/components-props.html