3.2版Vue组件通讯更新了啥？快来围观
2022-12-01 15:00:28
Vue3.2组件通讯华丽升级，引领前端开发新潮流
响应式系统大升级，数据变更更丝滑
Vue3.2的响应式系统迎来重大升级，采用高效算法，显著提升数据变更响应速度。这使得组件之间的通信更加顺畅，数据更新实时同步，让开发过程更流畅。
组件通信方式多样化，满足不同场景需求
除了传统事件总线、父子组件通信和兄弟组件通信，Vue3.2新增provide/inject方式，极大地方便了组件之间的通信。
实战技巧大揭秘，助你开发如飞
事件总线，组件通信的万能桥梁
事件总线是跨组件传递数据和事件的全局对象，方便组件之间的解耦和通信。
代码示例:
// 父组件
<template>
<event-bus></event-bus>
</template>
<script>
import EventBus from '@/eventBus.js'
export default {
mounted() {
// 向事件总线发布事件
EventBus.$emit('add-to-cart', { product: 'iPhone 14' })
}
}
</script>
// 子组件
<template>
<button @click="addToCart">加入购物车</button>
</template>
<script>
import EventBus from '@/eventBus.js'
export default {
methods: {
addToCart() {
// 监听事件总线事件
EventBus.$on('add-to-cart', (data) => {
// 更新数据
this.cart.push(data.product)
})
}
}
}
</script>
父子组件通信，数据传递的经典范式
父子组件通信是父组件通过props传递数据，子组件通过emit触发事件，实现数据和事件的双向传递。
代码示例:
// 父组件
<template>
<child-component :message="message"></child-component>
</template>
<script>
export default {
data() {
return {
message: 'Hello from parent!'
}
}
}
</script>
// 子组件
<template>
<div>{{ message }}</div>
<button @click="updateParent">更新父组件</button>
</template>
<script>
export default {
props: ['message'],
methods: {
updateParent() {
this.$emit('update-message', 'Hello from child!')
}
}
}
</script>
兄弟组件通信，跨级组件数据交互的新思路
兄弟组件通信通过事件总线或provide/inject实现跨级组件数据共享。
代码示例:
事件总线实现兄弟组件通信:
// 兄弟组件1
<template>
<button @click="addToCart">加入购物车</button>
</template>
<script>
import EventBus from '@/eventBus.js'
export default {
methods: {
addToCart() {
EventBus.$emit('add-to-cart', { product: 'iPhone 14' })
}
}
}
</script>
// 兄弟组件2
<template>
<ul>
<li v-for="product in cart" :key="product">{{ product }}</li>
</ul>
</template>
<script>
import EventBus from '@/eventBus.js'
export default {
data() {
return {
cart: []
}
},
mounted() {
EventBus.$on('add-to-cart', (data) => {
this.cart.push(data.product)
})
}
}
</script>
provide/inject实现兄弟组件通信:
// 父组件
<template>
<div>
<provide :cart="cart">
<child-component1></child-component1>
<child-component2></child-component2>
</provide>
</div>
</template>
<script>
export default {
data() {
return {
cart: []
}
}
}
</script>
// 子组件1
<template>
<button @click="addToCart">加入购物车</button>
</template>
<script>
export default {
inject: ['cart'],
methods: {
addToCart() {
this.cart.push('iPhone 14')
}
}
}
</script>
// 子组件2
<template>
<ul>
<li v-for="product in cart" :key="product">{{ product }}</li>
</ul>
</template>
<script>
export default {
inject: ['cart']
}
</script>
实战案例大开眼界
购物车组件与商品详情组件的通信:
父子组件通信 ，实现用户在商品详情页点击"加入购物车"按钮时，购物车组件自动更新数据。
表单组件与父组件的数据交互:
父子组件通信 ，实现用户在表单组件中输入数据时，父组件实时获取并处理这些数据。
兄弟组件通信，解锁跨级组件数据共享的新姿势:
事件总线或provide/inject ，实现不同父组件下的子组件之间实时更新数据。
结论
Vue3.2组件通讯的升级为前端开发带来了革命性的提升，极大地方便了组件之间的通信，提高了开发效率。拥抱Vue3.2组件通讯新特性，助你打造更加强大的前端应用！
常见问题解答
-
Vue3.2组件通讯有哪些方式？
- 事件总线
- 父子组件通信
- 兄弟组件通信
- provide/inject
-
父子组件通信是如何实现的？
- 父组件通过props传递数据，子组件通过emit触发事件。
-
事件总线在组件通信中有什么作用？
- 事件总线是一个跨组件传递数据和事件的全局对象，方便组件之间的解耦和通信。
-
provide/inject是Vue3.2中新增的组件通信方式，它的优势是什么？
- provide/inject允许组件向其子组件和孙组件提供数据，而无需显式地传递props，简化了组件之间的通信。
-
在使用Vue3.2组件通讯时需要注意什么？
- 确保组件之间的通信方式合理，避免不必要的通信。
- 注意组件通信中数据的变化，及时响应数据更新。
