01、不同组件之间是如何通信的？

day01 5.20

一、不同组件之间是如何通信的？

**请永远牢记vue是单向数据流
将一个页面的业务处理逻辑放在一起，处理和维护起来就会很复杂，不利于后续管理和扩展，这个时候就需要使用组件化来分门别类的管理逻辑
组件使用

• 全局注册子组件：

// main.js中的代码
...
import head from "./components/head";  // header  引入子组件  起名字
Vue.component("headBar", head);     //挂载到全局  并起个名字
...

在父组件中template 模板中作为标签使用

• 局部注册子组件:
  首先需要在需要使用的父组件中 引入子组件

import head from "./components/head";  // header  引入子组件  起名字

使用components注册

components：{
      组件名称：引入组件的名称
      // 注意： 名称一样可以直接省略  
 }

1.父传子：

• 在父组件的子组件标签上绑定一个自定义属性，挂载要传输的变量。
• 在子组件中通过props来接受数据，props可以是数组也可以是对象，
• 接受的数据可以直接使用

例如:
props:[“属性名”] 

props:{属性名:数据类型} （也可设置默认值）
和data、method 同级

——————————————————————

2.子传父：

于首先在子组件，写点击事件。实现点击一个按钮，使子组件的值传到父组件

然后在父组件中接收传递的值利用的是v-on（简写 @）

• 在父组件的子组件标签上通过绑定自定义事件，接受子组件传递过来的事件。
  
  在父组件中写方法

————————————————

3.兄弟组件传值：

需要有共同的父组件 ，通过main.js初始化一个全局的b u s

通过中央通信 let bus = new Vue（）

         child1：methods :{ 函数{bus.$emit(‘自定义事件名’，数据)}  发送

         child2：created （）{bus.$on(‘A发送过来的自定义事件名’，函数)}  进行数据接受

创建bus.js做为公共的仓库文件

bus.js内容为

分别创建两个组件：child1.vue,child2vue

child1代码：

child2代码：

通过周期函数mounted拿到值
在父组件中引入

引用----页面

挂载----注册

调用----模板中使用

• 总结：

  a. 其实就是使用 this.$emit('标志符','要传递的值') 实现将该组件传给父组件；
  
  b. 父组件中：通过需要向外传值的子组件标签的标志符，在自定义的方法中将值拿 到，并存起来，然后再用 ：A=存值得属性这种格式
  传给另外的子组件；
  
  c. 另外的子组件中使用props['A'],将传过来的值拿到，并且在需要用的地方使用，
  
  如果在methods中使用的A的话，其实和使用data中的属性一样，也是用this.xx 这种格式。