前言
vue组件之间的关系有父子组件、同级组件以及孙父子三级关系、还有更复杂的四级、五级关系,那他们之间的数据以及方法如何传递,也就是父子组件、同级组件、孙子组件等如何调用各自的变量、方法呢?
前面博主已经讲了同组件和父子组件的交互,那如果两个没有任何关系的组件或者更复杂的孙与子的三级组件、四级组件之间怎么交互?
这时再用前面所说的方法已经做不到了或者说很难实现了
这时就要用消息订阅与发布组件Pubsub了,他可以在任意组件之间实现交互
1.安装PubSub
首先在终端使用一下指令安装PubSub
npm install --save pubsub-js
安装成功就能在这里看到pubsub-js
2.引入组件
在要使用的组件中引入pubsub-js,这个不能全局引入只能哪个组件中使用就在哪个组件中引入,使用PubSub.publish(name,data);发布消息
<template> <div> <button @click="answer">这个世界谁最帅啊?</button> </div> </template> <script> import PubSub from 'pubsub-js'//引入PubSub export default{ name:'PubSubDemo', methods:{ answer(){ //发布 PubSub.publish('answer','博主最帅'); } } } </script> <style> </style>
3.消息订阅
在需要订阅的组件中使用 PubSub.subscribe(name,function)订阅消息
<template> <div id="app"> <PubSubDemo></PubSubDemo> </div> </template> <script> import PubSubDemo from './components/PubSubDemo.vue'//子组件 import PubSub from 'pubsub-js'//引入PubSub export default { name: 'App', components:{ PubSubDemo //映射组件 }, methods:{ say(msg){ alert(msg); } }, mounted() { //消息订阅,相当于前面的绑定事件监听 PubSub.subscribe('answer',(msg,data)=>{ this.say(data); }) } } </script> <style> </style>
Warning: A non-numeric value encountered in /www/wwwroot/www.wangdahai.cn/wp-content/themes/dux/modules/mo_comments_list.php on line 63
为什么不能全局引用?
可以在src/main.js中引用呀
可能是我用的版本问题