Vue-demo兄弟组件如何传值

1. 首先有两个兄弟组件

2. 在scr目录下面创建 common 文件夹再在common目录下创建 bus.js文件,具体如下

然后 bus.js 的内容如下

import Vue from "vue";
export default new Vue;

没错,只需要这些

3. 传值如何传过去?

3.1 在BrotherA 组件引入 bus

3.2 我们在 BrotherA 点击按钮传值过去

3.3 代码如下

<template><div>foots组件<button @click="changClick">传值过去</button></div>
</template><script>
import bus from "@/common/bus"
export default {data() {return {str:"我要传值给你"};},methods: {changClick () {
//toHandls我们自己定义的事件  this.str需要在 BrotherA传过去的数据  其实跟 this.$emit() 写法差不多,只不过把this换了bus.$emit("toHandls",this.str)  }},
};
</script><style scoped lang="less"></style>

4. 接收如何接收?

4.1 首先第一步也是要引入 bus

4.2 在Mounted这个生命周期函数获取

4.3 代码如下

<template><div>handls组件我来展示 --- {{msg}} 的值</div>
</template><script>
import bus from "@/common/bus"
export default {props: {},components: {},data() {return {  msg:''};},mounted() {// 这个 data 是 BrotherA 传过来的数据 这里负责接收bus.$on("toHandls",(data)=>{this.msg=data})},};
</script><style scoped lang="less"></style>

5. 兄弟组件之间传值的数据

Vue-demo兄弟组件如何传值相关推荐

Vue 解决兄弟组件之间传值问题
vue中父组件向子组件传递参数时,可以通过prop来传递参数,prop可以是数组形式,也可以是对象格式,子向父组件传递参数时,通过$emit来传递,$emit('方法名', 传参),来实现子组件和父 ...
六十三、Vue中非父子(兄弟)组件间传值，插槽的使用和作用域插槽（非常重要）
2020/10/18 . 周日.今天又是奋斗的一天. @Author:Runsen @Date:2020/10/18 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是 ...
vue中，兄弟组件之间传值
vue中,兄弟组件之间传值项目中,需要使用多个子组件,当需要传递值的时候,较为麻烦,怎样实现呢 1.一般可以使用子组件a传递给父组件,再由父组件传递给子组件b.但是一般较为麻烦, 2.使用bus作为 ...
Vue 兄弟组件之间传值 Bus方法
1.在vue项目中新建一个js文件(文件名:bus.js) import Vue from 'vue'export default new Vue(); 2.在需要传值的页面引用并开始传参 <s ...
VUE：兄弟组件间传参
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1.定义一个中间 eventBus.js ,只有 2 行代码,用于传参: // 此页面是vue ...
Vue实现兄弟组件间的方法调用及回调
Vue实现兄弟组件间的方法调用及回调看兄弟间数据传递的看我写的这篇文章:vue实现兄弟组件间的实时通信先说说我遇到的情况: 点击左侧树tree,需要调用右侧houseInfo组件中的新增方法,弹出 ...
Vue中父子组件之间传值，兄弟组件之间传值（两种方法）
一.父向子传值props 父组件向子组件传值: parent:<parent><child :message="msg"></child> // ...
前端开发：组件之间的传值(父传子、子传父、兄弟组件之间传值)的使用
前言在前端开发的时候,处理数据.传递数据是非常常用的操作方式,也是前端开发工作中非常重要的部分.尤其是在前端开发过程中的组件之间的数据传递,是必用操作.那么本篇博文就来分享一下在前端开发的时候,对于 ...
开发笔记--Vue中不同组件的传值的几种方法
父子组件传值 1.父传子思路:父组件传值到子组件中,使用props进行传值 //子组件 <template><div></div> </template&g ...

Vue-demo兄弟组件如何传值

1. 首先有两个兄弟组件

2. 在scr目录下面创建 common 文件夹再在common目录下创建 bus.js文件,具体如下

3. 传值如何传过去?

4. 接收如何接收?

5. 兄弟组件之间传值的数据

Vue-demo兄弟组件如何传值相关推荐

最新文章

热门文章

Vue-demo兄弟组件如何传值

1. 首先有两个兄弟组件

2. 在scr目录下面创建 common 文件夹 再在common目录下创建 bus.js文件,具体如下

3. 传值 如何传过去?

4. 接收 如何接收?

5. 兄弟组件之间传值的数据

Vue-demo兄弟组件如何传值相关推荐

最新文章

热门文章

2. 在scr目录下面创建 common 文件夹再在common目录下创建 bus.js文件,具体如下

3. 传值如何传过去?

4. 接收如何接收?