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如何实现同级组件传参(兄弟组件之间传参)


猜你喜欢
- jquery.cookie.js 操作cookie实现记住密码功能的实现代码 2024-02-12
- 原生js实现页面滚动动画 2023-12-02
- 学习小实例--滚动条的简单实现 2022-11-13
- php – 将mysql数据库中的BLOB映像显示为html中的动态div 2023-10-26
- 网站导航菜单的分割线和水平居中 2024-01-06
- Javascript解析URL方法详解 2024-01-17
- HTML5中的websocket实现直播功能 2024-01-16
- 纯CSS实现兼容IE7及以上宽度自适应无限级导航菜单附演示 2024-02-21
- Vue中的前后台交互 2023-10-08
- js本地图片预览实现代码 2023-12-23