vue 兄弟组件之间的传值

1. 定义一个公共的bus.js

//bus.js
import Vue from 'vue'
export default new Vue()

2. 在子组件A里用$emit发射数据

<script>
// 引入公共的bug，来做为中间传达的工具
import Bus from './bus.js'
export default {methods: {details(data) {//发射组件A的数据pub.$emit('tbPlotInfo', {tbPlot: data, isAdd: true}) }}
}
</script>

3. 在子组件B里用$on接收数据

<script>
import Bus from './bus.js'
export default {mounted: function () {// 注意名字要一样 tbPlotInfo ，data 就是上面传的整个对象pub.$on('tbPlotInfo', (data) => { console.log("tbPlot", data.tbPlot)console.log("isAdd", data.isAdd)})}}
</script>

兄弟组件传值：https://www.kancloud.cn/yr_zkino/vue_vue/851460

vue 兄弟组件之间的传值相关推荐

vue兄弟组件之间的传值，bus运用，beforeDestroy销毁，Bus.$off
vue兄弟组件之间的传值 1.建立一个单独的文件bus.js import Vue from 'vue' export default new Vue() 2.传递事件 // 传递事件 import ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
react兄弟组件之间的传值
react兄弟组件之间的传值一.通过redux 1.在redux中找到对应的文件设置 a. b. c. d. 2.页面存储数据到redux中 3.页面提取redux里面的数据二.通过hook中的c ...
Vue 兄弟组件之间传值 Bus方法
1.在vue项目中新建一个js文件(文件名:bus.js) import Vue from 'vue'export default new Vue(); 2.在需要传值的页面引用并开始传参 <s ...
Vue父子组件之间的传值
1.vue是如何进行父子组件之间的传值的 a.父子组件之间通过props b.子父组件之间通过$emit 2.简单demo描述父组件包含一个点击按钮,用于改变子组件的显示与隐藏: 子组件只有一 ...
vue之组件之间的传值
1.父组件向子组件传值 //parent.vue <template> <div> <child :send-msg-to-child="toChildMsg& ...
vue父子组件之间的传值，及互相调用父子组件之间的方法
场景:父子组件之间的传值方法,以及调用他们的内部的方法 *** 父组件给子组件传值是通过属性绑定的方法 *** 子组件给父组件传值是通过绑定对应的方法将自身的值传递给父 ...
vue兄弟组件之间的通信的使用
一般是页面里面引入两个组件在components 里面注册 components:{//引入的组件名 } 两个组件之间要传值的话要共同引入一下js的一个文件 import eventBus from ...
兄弟组件之间进行传值
首先创建一个中转站,是个js文件 import Vue from 'vue' var hub=new Vue(); //中转站 export default hub; 然后在第一个兄弟组件中 1.首先 ...

vue 兄弟组件之间的传值

1. 定义一个公共的bus.js

2. 在子组件A里用$emit发射数据

3. 在子组件B里用$on接收数据

兄弟组件传值：https://www.kancloud.cn/yr_zkino/vue_vue/851460

vue 兄弟组件之间的传值相关推荐

最新文章

热门文章