# 组件之间的数据共享
# 在项目开发中，组件之间的关系分为如下 3 种
- 父子关系
- 兄弟关系
- 后代关系
# 父子之间的数据共享
父子组件之间的数据共享又分为
# 1. 父向子共享数据
父组件通过v-bind 属性绑定向子组件共享数据。同时，子组件需要使用props接收数据
父组件
// 父组件 | |
<myTest | |
:msg="message" | |
:user="userinfo"> | |
</myTest> | |
data(){ | |
return{ | |
message:'hello vue', | |
userinfo:{ name:'zs', age:20 } | |
} | |
} |
子组件
<!-- 子组件 --> | |
<template> | |
<h3>测试父子传值</h3> | |
<p>{ msg }</p> | |
<p>{ userinfo }</p> | |
</template> | |
<script> | |
export default { | |
name: "MyTest", | |
props: ['msg', 'userinfo'], | |
} | |
</script> |
# 2. 子向父共享数据
子组件通过自定义事件的方式向父组件共享数据。
在子组件中
- 先声明自定义事件
emits: ['MyTestCount'], - 触发自定义事件
this.$emit('MyTestCount', this.count)
// 子组件 | |
export default { | |
// 1. 声明自定义事件 | |
emits: ['MyTestCount'], | |
data() { | |
return { | |
count: 0 | |
} | |
}, | |
methods: { | |
add() { | |
this.count += 1; | |
// 2. 数据发生变化时，触发自定义事件 | |
this.$emit('MyTestCount', this.count) | |
} | |
} | |
} |
在 父组件中
- 监听子组件的自定义事件
<test @MyTestCount = 'getTestCount'> </test> - 通过形参接收子组件传递过来的数据
<!--父组件--> | |
<!--1.监听子组件的自定义事件 @MyTestCount--> | |
<MyTest @MyTestCount="getMyTestCount"></MyTest> | |
<script> | |
import MyTest from "@/components/MyTest"; | |
// 父组件 | |
export default { | |
components: {MyTest,}, | |
data() { | |
return { | |
count: 0, | |
} | |
}, | |
methods: { | |
getMyTestCount(val) { // 2. 通过形参，接收子组件传递过来的数据 | |
this.count = val | |
} | |
} | |
} | |
</script> |
# 3. 父与子双向数据同步
父组件在使用子组件期间，可以使用v-model 指令维护组件内外数据的双向同步
- 首先父组件通过属性绑定的形式，向子组件传递一个props数据
<MySon v-model:num="count"></MySon> |
- 接下来在子组件接收 props 并声明emits. 注意 emits 需要以
'update:要更新谁放谁'形式写出来，这是一个固定写法
props:['num'] | |
emits: ['update:num'], |
- 接下来可以调用
this.$emit('update:xxx',最新的数据)发送出去即可
add() { | |
this.$emit('update:num', this.num + 1) | |
} |
# 兄弟组件之间的数据共享
兄弟组件之间实现数据共享的方案是EventBus，可以接受第三方的包mitt来创建eventBus 对象，从而实现兄弟组件之间的数据共享
- 安装 mitt 依赖包
npm i mitt - 创建公共的eventBus模块
// 导入 mitt 包 | |
import mitt from 'mitt' | |
// 创建 EventBus 对象 | |
const bus = mitt() | |
// 将 EventBus 的实例对象共享出去 | |
export default but |
- 在数据接收方定义事件
在数据接收方调用bus.on(' 事件名 ', 事件处理函数) 方法注册一个自定义事件
// 导入 eventBus.js 模块，得到共享的 bus 对象 | |
import bus from '@/eventBus/eventBus.js' | |
export default { | |
name: "Right", | |
data() { | |
return { | |
count: 0 | |
} | |
}, | |
created() { | |
// 调用 bus.on () 方法注册一个自定义事件，通过事件处理函数的形参接收数据 | |
bus.on('countChange', (num) => { | |
this.count = num | |
}) | |
} | |
} |
- 在数据发送方触发事件
在数据发送方，调用bus.emit(' 事件名称 ', 要发送的数据) 方法触发自定义事件
import bus from "@/eventBus/eventBus.js"; | |
export default { | |
name: "Left", | |
data() { | |
return { | |
num: 0 | |
} | |
}, | |
methods: { | |
addCount() { | |
this.num++ | |
// 调用 bus.emit () 方法触发自定义事件，并发送数据 | |
bus.emit('countChange', this.num) | |
} | |
}, | |
} |
