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如何实现同级组件传参(兄弟组件之间传参)
基础教程推荐
猜你喜欢
- js cookies实现简单统计访问次数 2024-01-12
- Div+Css(+Js)菜单代码及制作工具 2022-11-06
- 小程序tab页无法传递参数的方法 2023-12-13
- 原生 JS+CSS+HTML 实现时序图的方法 2024-01-17
- CSS让高度不确定图片垂直居中的几种技巧 2024-01-17
- JavaScript地理位置信息API 2023-12-14
- vue导出当前页面为pdf格式 2023-10-08
- php输出从mysql到html表 2023-10-26
- DOM 获取标签 获取body 标签 获取html根标签 querySelector querySelectorAll 2023-10-26
- javascript-从sqlite数据库读取信息,语法?如何在html5 webapp中使用它? 2023-10-26
