vue项目开发中,如何实现兄弟同级组件之间进行相互传参,下面编程教程网小编给大家详细介绍一下具体实现代码!
具体代码如下:
兄弟组件A
<template>
<div>
<button @click="sendMessage">发送数据</button>
</div>
</template>
<script>
export default {
methods: {
sendMessage() {
this.$bus.$emit('message', '我来自兄弟组件A的消息')
}
}
}
</script>
兄弟组件B
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: ''
}
},
created() {
// 监听事件,传递数据到message
this.$bus.$on('message', (message) => {
this.message = message
})
}
}
</script>
以上是编程学习网小编为您介绍的“vue如何实现同级组件传参(兄弟组件之间传参)”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
沃梦达教程
本文标题为:vue如何实现同级组件传参(兄弟组件之间传参)
基础教程推荐
猜你喜欢
- CSS鼠标悬浮DIV后显示DIV外的按钮解决方法 2024-01-23
- 瀑布流布局的两种实现方式:传统多列浮动和绝对定位布局 2024-01-24
- webpack-dev-server搭建本地服务器的实现 2024-04-23
- js实现页面跳转的五种方法推荐 2024-01-03
- 纯CSS实现箭头、气泡让提示功能具有三角形图标 2024-04-04
- Javascript复制实例详解 2024-04-01
- JS与CSS3实现图片响应鼠标移动放大效果示例 2024-01-19
- JavaScript 抽奖效果实现代码 数字跳动版 2023-12-03
- Vue过渡效果 2023-10-08
- Python脚本Selenium及页面Web元素定位详解 2023-12-20