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


基础教程推荐
猜你喜欢
- vue动态ip配置,避免重复打包 2023-10-08
- 异步调用webservice返回responseXML为空的问题解决方法 2024-01-08
- CSS中overflow-y: visible;不起作用的原因分析及解决方法 2024-01-23
- js确认框confirm()用法实例详解 2024-01-08
- 怎么用驱动精灵安装网卡驱动以及驱动精灵如何更新网卡驱动? 2024-01-23
- 学习从实践开始之jQuery插件开发 对话框插件开发 2024-02-05
- Angular服务Request异步请求的实例讲解 2024-01-06
- 通过Ajax方式绑定select选项数据的实例 2023-02-22
- VUE界面设计(Ⅰ)——Login界面 2023-10-08
- css 限定GridView宽度并加上滚动条 2024-01-23