VUE-组件通信

父子数据同步

• v-model指令，可以收集表单数据（注：v-model收集checkbox需要用数组收集）
• 属性修饰符.sync，可以实现父子数据同步。

父传子

• props
• 插槽

props

• 传递数据类型：
  • 函数 — 实质子组件想给父亲传递数据
  • 非函数 — 实质就是父亲给子组件传递数据
• 示例：
  • 传递动态：

    <child :msg="动态数据" updateChecked="hander">

  • 传递静态数据：

    <child msg="父组件定义一个属性向子组件传递信息"/>

  • 子组件在data前面添加props: [‘msg’],然后可以直接使用

    <view>{{msg}}</view>

• 特殊情况：路由传递props
  • 布尔值类型，把路由中params参数映射为组件props数据
  • 对象，静态数据
  • 函数，可以把路由中params|query参数映射为组件props数据

插槽

• 作用：
  1. 父组件通过调用子组件内部嵌套html内容作为slot分发给子组件
  2. 子组件通过在slot标签上添加属性，向父组件通信数据，作用域插槽
• 分类：默认插槽、具名插槽、作用域插槽

默认插槽name=”default”：

• 父组件使用子组件标签，并在开始和结束标签中间添加内容，单标签不添加内容
• 子组件在页面中使用

  <slot>父组件传递的内容会插入slot中</slot>

具名插槽：

• 适用于多个插槽
• 父组件在页面中使用子组件标签时，添加内容的模板标签上指定插槽名

  <template v-slot:slotname></template> // v-slot只能用在template上

• 子组件在页面中使用

  <slot name="slotname">父组件传递的内容会插入slot中</slot>

作用域插槽：

• 理解：『在父组件中访问子组件的数据，但是展示的样式由父组件决定』
• 在子组件的插槽标签上中绑定数据：

  <slot :var="data" name="slotname">{{data}}</slot> // data是在子组件中定义的

• 父组件使用子组件标签，在内容区域使用

  <template v-slot:slotname="接收数据的变量名，且等于子组件的data">...</template>

子传父

• 自定义事件
• ref：在父组件内部获取子组件
• $children：在父组件内部获取全部的子组件『返回数组』
• $parent：在子组件内部获取唯一的父组件『返回组件实例』

自定义事件($emit, $on[简写@])

• 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件，『事件的回调在A中』
• 绑定自定义事件, 方式一在父组件中：

  <Child @childEvent="要触发的事件"/>

  • 要触发的事件要在父组件的methods中定义
  • 父组件可以通过该事件的参数获取子组件传递的信息
  • 子组件也要定义任意一个事件，在该事件要触发

    this.$emit('childEvent'，'要传递的参数')

• 绑定自定义事件, 方式二，在父组件中给组件：

  <Demo ref="实例名"/>
  mounted(){
  	this.$refs.实例名.$on('事件名',this.test)
  }

• 若想让自定义事件只能触发一次，可以使用 once修饰符，或 $once方法
• 自定义事件名：父组件通过该事件的参数获取子组件传递过来的数据，名字随意
• 子组件触发自定义事件：

  this.$emit('事件名',数据)

• 子组件解绑自定义事件

  this.$off('事件名')

• 组件上也可以绑定原生DOM事件，需要使用 native修饰符
• 注意：通过 this.$refs.实例名.$on(‘事件名’,获取事件的回调)，回调要事先在methods中定义或用箭头函数

跨级组件通信

• $attrs：组件实例的属性，可以获取到父亲传递的props数据（前提子组件没有通过props接受）
• $listeners：组件实例的属性，可以获取到父亲传递自定义事件（对象形式呈现）

万能

• 全局事件总线
• pubsub

$bus全局事件总线（GlobalEventBus）

• 安装全局事件总线：在main.js的new Vue中添加

  beforeCreate() {
  	Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
  },

1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，『事件的回调留在A组件自身』
   • 在mounted中使用

     this.$bus.$on('自定义事件名',事件的回调函数)

   • 在beforeDestroy中解绑

     this.$bus.$off('自定义事件名')

2. 提供数据：

   this.$bus.$emit('自定义事件名',数据)

pubsub-js[消息订阅与发布]

1. 安装：

   npm i pubsub-js

2. 引入：

   import pubsub from 'pubsub-js'

3. 接收数据：A组件接收数据，则在A组件中订阅消息，订阅的『回调留在A组件自身』
   • 在mounted中添加

     this.pid = pubsub.subscribe('自定义事件名',回调事件)

4. 提供数据：

   pubsub.publish('自定义事件名',数据)

5. 在beforeDestroy中，用

   PubSub.unsubscribe(pid) // 取消订阅