Vue--组件传值，组件全局数据传递、插槽

1.组件间传值

父组件向子组件传值：

子向父传递数据，通过触发事件：
网页-兄弟传值：
兄弟组件之间的传值和父子组件之间的传值非常相似，都是通过$emit;
原理是：vue一个新的实例，类似于一个站，连接着两个组件，也就是一个中央事件总线；
下面是一个bus实例：

1、创建一个firstChild组件，引入bus,接着一个按绑定数据传输事件：

我们通过一个$emit自定义一个事件，并传递数据；
$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。

下面是另一个组件，引入bus实例，通过一个p标签接收数据：

这个组件的mounted里，我们监听了userDefinedEvent事件，并把传递过来的事件通过$on监听回调函数；on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由emit触发，回调函数会接收所有传入事件触发函数($emit)的额外参数。

小程序兄弟间传值：

2.组件全局数据传递：

• 通过Vue的原型共享数据

  //在main.js中
  import Vue from 'vue'
  Vue.prototype.baseUrl = "www.google.com"
  //调用，在组件中 this.baseUrl
  

• 通过globalData共享数据

  在App.vue中：

  globalData:{
  base: "www.360.com"
  }
  

  在组件中：
  
  console.log(getApp().globalData.base)
  

• vuex

• 本地存储

3.插槽

4.生命周期

应用：

页面：

组件：