vue 非父子组件之间传值 bus / 总线

灰太狼 2022-05-11 08:00 232阅读 0赞

一、在Vue 的原型中创建一个属性 bus

Vue.prototype.bus=new Vue();

二、子组件中绑定事件 比如叫  handleClick，在子组件中定义 hanleClick 方法 ，handleClick 方法中使用

this.bus.$emit('change',this.contentmsg);  触发事件 ‘ change ’ ,携带this.contentmsg 。

三，使用mouted 钩子函数监听 bus 的改变。

mounted:function()\{

var this\_=this;

this.bus.$on('change',function(msg)\{

this\_.contentmsg=msg;

\})

\}

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>非父子之间的传值 bus / 总线  </title>

</head>

<body>

<div id="root">

<child content="Dell"></child>

<child content="Lee"></child>

</div>

<script src="vue.js"></script>

<script>

Vue.prototype.bus=new Vue();

Vue.component('child',\{

props:\{

content:\{

type:String

\}

\},

data:function()\{

return \{

contentmsg:this.content

\}

\},

template:'<div @click="handleClick" >\{ \{contentmsg\}\}</div>',

methods: \{

handleClick : function()\{

this.bus.$emit('change',this.contentmsg);

\}

\},

mounted:function()\{

var this\_=this;

this.bus.$on('change',function(msg)\{

this\_.contentmsg=msg;

\})

\}

\});

var vm = new Vue(\{

el:'\#root',

\});

</script>

</body>

</html>

发表评论取消回复

表情：

评论列表（有 0 条评论，232人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue学习笔记：非父子组件之间的传值

先建立两个组件title和news，用来验证非父子组建的传值，然后再把这两个组件引入根组件,显示即可，代码如下： app.vue: <template> ...

拼搏现实的明天。/ 2024年04月17日 22:12/ 0 赞/ 37 阅读

相关 Vue组件通信（父子组件传值，非父子组件传值）

主要是整理给自己用的一些面试常用题，这里记录一下vue组件间通信几种方式。父组件传值到子组件（父传子）先定义一个子组件，这里我在component文件夹里定义一个c

电玩女神/ 2023年06月23日 02:56/ 0 赞/ 121 阅读

相关 Vue - 组件传值（父子组件间传值、非父子组件间传值）

推荐：[Vue汇总][Vue] Vue - 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue

我就是我/ 2022年12月21日 11:00/ 0 赞/ 269 阅读

相关 vue非父子组件、兄弟组件之间的传值通信

一般来说在vue项目里面的父、子组件间的传值很容易理解，父传子无非就是在子组件里面用`props`来显示的声明父组件传递的属性，例如：子组件： <!--这是子组件

快来打我*/ 2022年10月17日 00:48/ 0 赞/ 204 阅读

相关 vue-bus非父子组件之间触发事件

在main.js 中全局引入 import VueBus from 'vue-bus' Vue.use(VueBus) 组件监听 th

客官°小女子只卖身不卖艺/ 2022年06月03日 10:12/ 0 赞/ 178 阅读

相关 vue 非父子组件之间传值 bus / 总线

一、在Vue 的原型中创建一个属性 bus Vue.prototype.bus=new Vue(); 二、子组件中绑定事件比如叫 handleClick，

灰太狼/ 2022年05月11日 08:00/ 0 赞/ 233 阅读

相关 vue非父子组件间的传值 Bus/总线机制/发布订阅模式/观察者模式

Bus/总线机制/发布订阅模式/观察者模式我们需要将一个组件的子组件的数据传递给另一个组件的子组件 ① 将Vue的实例赋值给Vue.prototype.bus，这样只要我

清疚/ 2022年04月22日 05:56/ 0 赞/ 141 阅读

相关 vue基础：非父子组件传值

vue基础：非父子组件传值本文共用到四个文件：根组件：App.vue 两个子组件：Home.vue,News.vue js文件：eveemit.js

ゝ一纸荒年。/ 2022年03月24日 14:46/ 0 赞/ 271 阅读

相关 vue - 父子组件之间的传值以及非父子组件之间的传值

父子组件传值在项目中非常常用的，一般遇到一样的模块，我们都会考虑做成一个公共组件，多个页面一起使用。同时，我们偶尔也会遇到非父子组件传值这种情况。下面我来介绍一下它们之间是

不念不忘少年蓝@/ 2021年09月29日 12:12/ 0 赞/ 384 阅读

相关 Vue - 非父子组件之间传值

非父子组件之间传值有两种方式：一. Vuex [https://blog.csdn.net/Jie\_1997/article/details/107228246

た入场券/ 2021年09月01日 12:18/ 0 赞/ 526 阅读