Vue21话 组件间通信

逆流者 2020年02月02日 108次浏览

1. 组件间通信基本原则

  • 不要在子组件中直接修改父组件的状态数据
  • 数据在哪, 更新数据的行为(函数)就应该定义在哪

2. 组件间通信方式

2.1 props

2.1.1 组件标签

<my-component name='jerry' :age='10' :set-name='setName'></my-component>

2.1.2 定义 MyComponent

在组件内声明所有的 props

  • 方式一: 只指定名称
props: ['name', 'age', 'setName']
  • 方式二: 指定名称和类型
props: {
  name: String,
  age: Number,
  setNmae: Function
}
  • 方式三: 指定名称/类型/必要性/默认值
props: {
  name: {type: String, required: true, default: xxx},
}

2.3.3 注意事项

  • 此方式用于父组件向子组件传递数据
  • 所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
  • 如果需要向非子后代传递数据必须多层逐层传递, 兄弟组件间也不能直接 props 通信, 必须借助父组件才可以

2.2 vue 的自定义事件

2.2.1 绑定事件监听(父组件)

  • 方式一: 通过 v-on 绑定
@addTodo="addTodo"
  • 方式二: 通过$on()
<TodoHeader ref="header"/>

// 绑定自定义事件监听（addTodo）
this.$refs.header.$on('addTodo', function (todo) {
  this.deleteTodo(todo)
})
// 简写
this.$refs.header.$on('addTodo', this.addTodo)

2.2.2 触发事件(子组件)

// 触发事件(子组件向父组件发送数据)
this.$emit(eventName, data)

2.2.3 注意:

  • 此方式只用于子组件向父组件发送消息(数据)
  • 隔代组件或兄弟组件间通信此种方式不合适

2.3 消息订阅与发布(如: pubsub 库)

2.3.1 订阅消息

npm install pubsub-js --save

// 引入pubsub-js
import PubSub from 'pubsub-js'

PubSub.subscribe('msg', function(msg, data){})

2.3.2. 发布消息

PubSub.publish('msg', data)

2.3.3 注意

  • 此方式可实现任意关系组件间通信(数据)

2.4 slot

此方式用于父组件向子组件传递标签数据

2.4.1. 子组件: Child.vue

<template>
  <div>
    <slot name="xxx">不确定的标签结构 1</slot>
    <div>组件确定的标签结构</div>
    <slot name="yyy">不确定的标签结构 2</slot>
  </div>
</template>

2.4.2 父组件: Parent.vue

<child>
  <div slot="xxx">xxx 对应的标签结构</div>
  <div slot="yyy">yyyy 对应的标签结构</div>
</child>

2.5 vuex

后续补充

上一篇： Vue22话 ajax