【Vue】通过【消息定阅pubsub】实现【任意组件】之间的参数传递(图文+代码示例)
2023-09-11 14:14:57 时间
一、安装消息订阅插件:pubsub-js
二、效果图
三、School.vue(发送消息)
<template>
<!-- 组件一 -->
<div class="demo">
<h2>-----【School.vue】子组件-----</h2>
<h2>学校名称:{{ schoolName }}</h2>
<h2>学校地址:{{ address }}</h2>
<button @click="showName1">点击传给Student组件</button>
</div>
</template>
<script>
import pubsub from "pubsub-js";
// 把组件暴露出去,方便引入 Vue.extend可以省略
export default {
// eslint-disable-next-line vue/multi-word-component-names
name: "School",
data() {
return {
schoolName: "清华大学",
address: "北京",
};
},
methods: {
showName1() {
pubsub.publish('messageOrder',[this.schoolName,this.address])
},
},
};
</script>
<style scoped>
.demo {
background-color: antiquewhite;
border: 1px red solid;
padding-left: 10px;
height: 250px;
width:400px;
}
button{
width:300px;
height: 50px;
/* background-color: antiquewhite; */
font-size: 22px;
}
</style>
四、Student.vue(自动接收消息)
相关文章
- (尚032)Vue_案例_消息订阅与发布(组件订阅与发布(PubSubJS库))
- (尚002)Vue的基本使用
- vue - Vue介绍
- 【Vue】Vue中【爷组件】与【子组件】通过【父组件】参数相互调用方法(props方式,图文+代码示例)
- 【Vue】Vue组件中事件和方法的混合(mixin)应用(图文+代码示例)
- 【Vue】单文件的组件(.vue)代码实例
- Vue - 满意度调查评价功能,表情图片打分评分组件(非星星评分组件,类似抖音商品满意度好评、中评、差评评价功能)代码干净整洁注释详细无 BUG,无任何第三方插件依赖,完整功能实例源码插件
- Vue - 完美解决 Element UI 侧边导航菜单 <el-menu> 出现滚动条,去掉 Element 侧边导航组件的横纵滚动条(但滚动功能依然保留,仅仅是去掉 “滚动条“)100% 解决方案
- [转]Vue-Devtools安装配置教程(献给伸手党)
- Vue项目--尚品汇(静态主页及其组件的拆分)
- Vue 获取验证码倒计时组件
- Vue组件间的通信【子传父,父传子,同级传递,爷孙传递】
- 【VSCode】vue中配置@的自动提示
- vue数据更新,但是页面组件没有更新,甚至获取的this中的数据都不一样,使用$set也不行
- Vue动态加载组件的四种方式
- Vue 国际化之 vue-i18n 的使用
- Vue Provide / Inject 详细介绍(跨组件通信、响应式变化、版本变化)
- Vue知识点总结(12)——组件通信-子传父(超级详细)
- VUE-015-解决 vue install 引发的 failed Error: not found: python2 问题
- VUE图片懒加载-vue lazyload插件的简单使用
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- vue-router4之嵌套路由
- vue渲染时对象里面的对象的属性提示undefined,但渲染成功
- [js高手之路] vue系列教程 - 绑定class与行间样式style(6)
- 详解vue组件的is特性:限制元素&动态组件
- SpringBoot+Vue前端Http调用后台封装POI接口导出EXCEL