- A与b、c、d为父子关系
- b、c、d为兄弟关系
- A与b1、b2、c1、c2、d1、d2为隔代关系
一、父子组件
1. 父向子传递数据 (props)：子组件中需要用到父组件中的数据
- 子组件：js中用props接收
- 父组件：:子组件中的变量名
:要传递的名字="要传递的值"
2. 子向父传递数据 ($refs/$emit)：父组件中需要用到子组件中的数据
- 情况1：父组件只有在初始化的时候需要获取子组件中的数据，并且数据不再变化
通过this.$refs.子组件名.数据获取
- 情况2：父组件需要从子组件中获取数据，并且这个数据会受到子组件中的某些操作而发生变化
- 子组件：js中添加自定义事件(this.$emit('event', params))
- 父组件：js中监听自定义事件(event)，并在父组件中处理该事件
子组件发射自定义事件
父组件监听并处理自定义事件
3. 父组件直接访问子组件中的方法和属性 ($refs $children)
- $children 访问所有子组件
- $refs.子组件名.方法 访问特定的子组件 通过ref给子组件赋予一个ID引用
4. 子组件直接访问父组件中的方法和属性 ($parent $root)
- $parent 访问父组件
- **ref类似
二、非父子
1️⃣事件总线、2️⃣VueX、3️⃣混入、4️⃣依赖注入、5️⃣v-model
1. 事件总线EventBus
- 总体思路：使用一个空的vue实例作为中央事件总线
- 原型链
- $emit $on
- $emit 触发当前实例上的事件，参数传递给监听自定义事件的函数。
- $on 监听当前实例上的自定义事件，回调函数接收所有额外参数。
2. Vuex
待补充
3. 混入
- 分为全局混入和局部混入，混入内容与组件自身发生冲突时，以组件自身内容为主
- 使用
- （1）定义并导出一个混入对象及内容(data, methods...)
- （2）混入（全局 or 局部）
- 全局混入：在main.js中通过Vue.mixin混入，不需要在组件中再引入
Vue.mixin({需要全局混入的内容})- 局部混入：需要在组件内部通过mixins: [mixin名字]混入
mixins: [test] // 将test混入到当前组件
4. 依赖注入（provide && inject）
优点：
① 祖先组件不需要知道哪些后代组件使用它提供的 property
② 后代组件不需要知道被注入的 property 来自哪里
- 数据
- 父组件：提供一个依赖
- 孙子组件：注入一个依赖
- 方法
- 同数据
