02 Vue中组件通信(上)

组件是Vue.js强大的功能之一，而组件实例的作用域是相互独立的，那么在开发的过程中，组件与组件之间肯定是相互联系的，那么，组件之间是如何通信的，是如何传递数据的呢？

一: 几种常见的组件

父子组件、兄弟组件、跨级组件；而相应的通信也分为：父子组件通信、兄弟组件通信、跨级组件通信。
那么，针对不同的组件，我们如何进行通信呢？接下来我们来看一下都有哪些组件间的通信方式。

二： 组件间的通信方式

1. 父子组件通信(props/$emit)

a. 父传子 --- 父组件通过props向下传递数据给子组件

父组件通过props的方式来给子组件传值，例子：子组件son.app如何获取父组件App.vue中的数据title和lists，动态传值要结合使用v-bind

// App.vue 父组件
<template>
  <div id="app">
// 1. 给 prop 传递一个静态的值，title 为 prop 的名称(名称为自定义名称)，等号后面的为 prop 要传递的值
// 2. prop 通过 v-bind 动态赋值 , 前者 lists 为自定义名称便于子组件调用，后者 list 为要传递数据名即 data中的 lists
    <son  title = "这是父组件传来的静态值"  :lists="lists"></son> 
  </div>
</template>

<script>
import son from './components/son'
export default {
  name: 'app',
  components:{son},
  data(){
    return {
      lists: ['宝玉','黛玉','宝钗']
    }
  }
  
}
</script>

// son.vue 子组件
<template>
  <div class="son">
    <div>{{title}}</div> // 渲染从父组件中接收到的数据
    <ul>
      <li v-for="list in lists" >{{list}}</li> // 遍历传递过来的值，后渲染到页面
    </ul>
  </div>
</template>
<script>
export default {
  props: ['title','lists']    // 数组中的内容就是父组件中子标签自定义名字
}
</script>

b. 子传父

• 通过自定义事件模式 $on和 $emit

子组件使用$emit来触发事件，父组件使用$on来监听事件，一旦子组件触发该事件，则父组件就会接收该事件并作出相应处理。类似与JavaScript中的发布订阅模式。

• vm.$on(evet,callback)
  • 参数
    • {string | Array<string>} event(数组只在 2.2.0+ 中支持)
    • {Function} callback
  • 用法
    监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。
  • 示例：

    vm.$on('test', function (msg) {
          console.log(msg)
    })
    vm.$emit('test', 'hi')
    // => "hi"
    

• vm.$emit(evnetname,[...args])
  • 参数：
    • {string} eventName
    • [...args]
      触发当前实例上的事件。附加参数都会传给监听器回调。

下述代码为，子组件son.vue向父组件App.vue传递一个数据

// son.vue 子组件
<template>
  <div class="son">
    <button @click = "$emit('msghandle',msg)">点击</button>  // msghandle 为自定义事件的名字，msg 为要传递的数据
  </div>
</template>
<script>
export default {
  props: ['title','lists','acount'],
  data(){
    return {
      msg: "这是从子组件传递过来的信息"
    }
  }
}

// App.vue 父组件
<template>
  <div id="app">
    <son @msghandle="handle"></son> // msghandle 事件名称与子组件保持一致，handle 为回调函数，接收传递过来的额外参数
    <div>{{msg}}</div>
  </div>
</template>

<script>
import son from './components/son'
export default {
  name: 'app',
  components:{son},
  data(){
    return {
      msg:''
    }
  },
  methods: {
    handle(e){    // 执行子组件触发的事件 ， e为子组件传递过来的参数
      this.msg = e  
}
  } 
}
</script>

上述代码实现的功能，当点击 [点击] 按钮时，父组件中会接收并显示来自组件的信息。 点击前 当点击按钮时 点击后

• 子传父(在组件中使用v­-model)

$emit的代码,这行代码实际上会触发一个 input事件, input后的参数就是传递给v-­model绑定 的属性的值, v­-model 其实是一个语法糖，这背后其实做了两个操作

• v-­bind 绑定一个 value 属性, v-­on 指令给当前元素绑定input 事件
• 要使用v-­model,要做到：接收一个 value 属性。 在有新的 value时触发input 事件
  举个例子:

// App.vue 
<template>
  <div id="app">
    <son v-model="message"></son>
    <p>{{message}}</p>
  </div>
</template>

<script>
import son from './components/son'
export default {
  name: 'app',
  components:{son},
  data(){
    return {
      message:'hello'
    }
  }
}
</script>

// son.vue 
<template>
  <div class="son">
    <div>
      <input type="text" v-model="mymessage" @change="change"> 
    </div>
  </div>
</template>
<script>
export default {
  props: ['value'],  //v-model 会自动传递一个字段为 value 的 props 属性
  data(){
    return {
      mymessage: this.value  
    }
  },
methods: {
    change() {
      this.$emit('input', this.mymessage); //通过如此调用可以改变父组件上 v-model 绑定的值
    }
}
</script>

在上面的实例代码中，我们定义了App.vue 和 son.vue 两个组件，这两个组件是父子关系，v-model 也只能实现父子组件之间的通信。

• 在 App.vue 组件中，我们给自定义的 son 组件实现了 v-model绑定了 message 属性。此时相当于给 son 组件传递了 value 属性和绑定了input 事件。
• 顺理成章，在定义的 son 组件中，可以通过 props获取value属性，根据 props 单向数据流的原则，又将value 缓存在了 data里面的mymessage上，再在input 上通过v-model 绑定了 mymessage 属性和一个 change 事件。当input 值变化时，就会触发 change事件，处理 App.vue组件通过v-model 给 son组件绑定的 input事件，触发 App组件中 message 属性值的变化，完成 son子组件改变 App组件的属性值。

2. 兄弟组件通信

这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。当我们的项目比较大时，可以选择更好的状态管理解决方案vuex

1. 大致步骤：

const bus = new Vue()
Vue.prototype.$bus = bus
$bus.$emit(事件名,数据);
$bus.$on(事件名,data => {});

2. 举个例子
   假设兄弟组件有三个，分别是A、B、C组件，C组件如何获取A或者B组件的数据

// 定义中央事件总线，并将中央事件总线挂在 Vue.prototype 上，这样所有组件都能访问到了
// main.js 文件
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const bus = new Vue()
Vue.prototype.$bus = bus;

new Vue({
  render: h => h(App),
}).$mount('#app')

// A.vue 组件A
<template>
  <div>
    <h3>A组件: {{name}}</h3>
    <button @click = "send">将数据发给C组件</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      name: "Nick"
    }
  },
  methods:{
    send(){
      this.$bus.$emit('data-a',this.name)
    }
  }
}
</script>

// B.vue 组件B
<template>
  <div>
    <h3>B组件：{{age}}</h3>
    <button @click="send">将数据发给C组件</button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      age: 30
    }
  },
  methods:{
    send(){
      this.$bus.$emit('data-b',this.age)
    }
  }
}
</script>

<template>
  <div>
    <h3>C组件：{{name}} {{age}}</h3>
  </div>
</template>
<script>
export default {
  data(){
    return {
      name:'',
      age:''
    }
  },
  // mounted 在模板编译后执行
  mounted(){
    this.$bus.$on('data-a',name => {
      this.name = name
    })
    this.$bus.$on('data-b',age => {
      this.age = age
    })
  }
}
</script>

// App.vue 文件中
<template>
  <div id="app">
    <A></A>
    <B></B>
    <C></C>
  </div>
</template>

<script>
import A from './components/A'
import B from './components/B'
import C from './components/C'

export default {
  name: 'app',
  // components:{son},
  components:{A,B,C},
</script>

在上面的实例中，我们定义了组件 A 和组件 B和组件C，但三个组件之间没有任何的关系。
1)、 首先我们通过 new Vue()实例化了一个 Vue 的实例，也就是我们这里称呼的中央事件总线 bus，然后将其挂载Vue.prototype.$bus，使得所有的业务逻辑组件都能够访问到；
2)、 然后定义了组件 A，在组件 A 里面定义了一个处理的方法 send，主要定义触发一个 data-a 事件，并传递一个参数；然后定义了组件 B，在组件 B 里面定义了一个处理的方法 send，主要定义触发一个 data-b 事件，并传递一个参数；
3). 最后定义了组件 C，在组件 C 里面的 mounted 生命周期监听了组件 A 和组件B里面定义的 data-a和data-b事件，并在回调函数里面执行了一些逻辑处理。

中央事件总线 bus 非常简单，就是任意组件和组件之间打交道，没有多余的业务逻辑，只需要在状态变化组件触发一个事件，然后在处理逻辑组件监听该事件就可以。该方法非常适合小型的项目！

参考资料

• Vue 组件通信方式全面详解
• vue组件间通信六种方式（完整版）