精华内容
下载资源
问答
  • 主要介绍了VUE兄弟组件传值操作,结合实例形式分析了VUE兄弟组件传值操作的原理、步骤、实现方法及相关注意事项,需要的朋友可以参考下
  • vue 兄弟组件传值

    2020-08-11 01:50:02
    接下来介绍如何使用eventBus实现兄弟组件传值 首先我的需求是这样的,页面上由top,left,main,bottom四个组件构成。需要将top中的值传到left中。 第一步:创建一个js文件,eventBus.js,位置随便放,我是放在了...

    在vue开发中总会遇到组件传值问题,今天总结一下兄弟组件之间的传值方法。

    1、子传父,父传子

    2、vuex

    3、eventBus

    接下来介绍如何使用eventBus实现兄弟组件传值

    首先我的需求是这样的,页面上由top,left,main,bottom四个组件构成。需要将top中的值传到left中。

    img

    第一步:创建一个js文件,eventBus.js,位置随便放,我是放在了src目录下

    import Vue from 'vue'
    export default new Vue()

    第二步:在top组件中,引入刚才的js

    import '@/eventBus.js'

    然后在methods里边定义一个函数

    methods:{
    changesize(){
    eventBus.$emit('add',this.arg)
    }
    }

    我测试用的是button点击触发changesize函数,然后将arg传出去

    第三步:在left组件中也先让引入eventBus.js,然后使用created生命周期函数

    created(){
    eventBus.$on('add',(message)=>{
    //一些操作,message就是从top组件传过来的值
    console.log(message)
    })
    },
    展开全文
  • 1,bus总线传值 2,常规子1传父->父传子2 ...//使用 兄弟A 传值 import bus from '路径' bus.$emit('自定义事件名称',输出数据) //使用 兄弟B 接值 import bus from '路径' bus.on('自定义事件名',(r

    1,bus总线传值

    2,常规子1传父->父传子2

    3,vuex

    这里详细说明bus总线传值的总路线及方法:本例为基本用法,如果不理解的可以看下面的详细使用方法:

    //bus.js 
    import Vue from 'vue';
    export default new Vue;
    //使用 兄弟A 传值
    import bus from '路径'
    bus.$emit('自定义事件名称',输出数据)
    //使用 兄弟B 接值
    import bus from '路径'
    bus.on('自定义事件名',(res)=>{})

    一. bus总线传值的使用:

    1,在项目中创建一个单独的eventBus.js文件

    2,该js文件的内容很简单,就是暴露一个vue实例而已。

    有人喜欢在main.js全局引入该js文件,我一般在需要使用到组件中引入。

     3,创建相关组件:

    4,父组件中注册并使用子组件:

    5,分别在子组件one和two中引入eventBus.js 

    6,one组件向two组件传值:(传值使用$emit)

    7,two组件接收到one组件的值:(接收值使用$on)

     

    到这里其实使用bus总线实现兄弟组件之间的传值已经完成。

     

     

     

     

    展开全文
  • 兄弟组件传值 兄弟1 - 传给父组件,父组件 - 传给兄弟2 这个方法不优雅而且和组件化的思想有相悖之处,如果另一个组件需要用到还要单独的复制粘贴父组件的逻辑,不推荐 创建一个js文件当做媒介,来监听一个事件...

    兄弟组件传值

    • 兄弟1 - 传给父组件,父组件 - 传给兄弟2
      这个方法不优雅而且和组件化的思想有相悖之处,如果另一个组件需要用到还要单独的复制粘贴父组件的逻辑,不推荐

    • 创建一个js文件当做媒介,来监听一个事件进行数据传送

    场景,子组件1 和 子组件2 是分离的
    子组件2 是隐藏的
    子组件1 可以控制 子组件2 显示

    1. 这里我先创建了一个hideNavMiddle.js文件当作媒介
    //hideNavMiddle.js
    import Vue from 'vue'
    
    const Bus = new Vue;
    
    export default Bus
    
    1. 在组件1中引入,并用$emit 发送事件 topNavShow
    //组件1
    import Bus from './hideNavMiddle'
    
    methods:{
        busValue() {
          Bus.$emit('topNavShow', true);
        }
      }
    
    1. 在组件2中mounted监听事件
    import Bus from './hideNavMiddle'
    
    mounted(){
        const that = this;
        Bus.$on("topNavShow", msg => {
          that.topNav = msg;
        })
      }
    

    这样复用的时候只需要引入两个组件通信的媒介就可以了。

    展开全文
  • vue兄弟组件传值

    2021-02-25 13:39:41
    car---兄弟组件传值</div> <div>下面显示的是brother1向brother2页面进行兄弟组件传值:</div> <brother1></brother1> <brother2></brother2> </div> <
    <template>
      <div v-title :data-title="title">
        <div>car---兄弟组件传值</div>
        <div>下面显示的是brother1向brother2页面进行兄弟组件传值:</div>
        <brother1></brother1>
        <brother2></brother2>
      </div>
    </template>
    
    <script>
      // 在一个页面引入两兄弟组件
      import brother1 from '../components/brother1'
      import brother2 from '../components/brother2'
      export default {
        components:{brother1,brother2},
        data() {
          return {
            title:'页面名称'
          }
        },
        methods: {
          
        },
        created: function () {
        
        }
      }
    </script>
    
    组件brother1.vue页面代码:
    
    <template>
      <div>
        <div @click="emitCar()">
        	兄弟页面brother1---------点击传值到brother2
        </div>
      </div>
    </template>
    
    <script>
      // 兄弟组件传值:在传值的组件中,引入brother
      import brother from '../api/brother.js';
      export default {
        data() {
          return {
    
          };
        },
        methods: {
          emitCar(){
            // 使用vm.$emit(‘事件名称’,’传入参数’),作为发送消息的那一方
    
            // 第一种方法  引入brother.js
            brother.$emit('to-car','我是兄弟组件1要传的值')   // 向兄弟组件传值
    
    
            // 第二种方法  在main.js中定义  Vue.prototype.bus = new Vue();
            //由于bus是vue的一个实例,所以它有$emit这个方法,to-car就是一个随意的名字,可以改成aaa
            // this.bus.$emit('to-car','哈哈哈厈枯')
          },
        },
      };
    </script>
    
    组件brother2.vue页面代码:
    
    <template>
      <div>
        兄弟页面brother2------兄弟组件1传值“{{selfContent}}”到兄弟组件2了
      </div>
    </template>
    
    <script>
      // 兄弟组件传值:在接收值的组件中,引入brother
      import brother from '../api/brother.js';
      export default {
        data() {
          return {
            selfContent:''
          }
        },
        methods: {
          
        },
        created: function () {
          // 第一种方法  引入brother.js
          // 使用vm.$on(‘事件名称’,’回调函数’),作为接收消息的那一方。
          // 用$on事件来接收参数   并且调用了在a组件中出发的方法
          //兄弟组件传值:在created中开始监听,越早监听越好
          brother.$on('to-car',(data)=>{
            console.log(data)
            this.selfContent = data;
          })
    		
    	  // 第二种方法  在main.js中定义  Vue.prototype.bus = new Vue();
          // this.bus.$on("to-car",(data)=>{
          //   console.log(data)
          //   this.selfContent = data;
          // })
          
        },
      }
    </script>
    
    第一种方法----bother.js页面代码:
    
    // 兄弟组件传值的中间bus
    import Vue from 'vue'
    
    var brother = new Vue();
    
    export default brother
    
    第二种方法----main.js页面代码:
    
    // ****兄弟组件传值 vue bus可以实现不同组件间、不同页面间的通信
    Vue.prototype.bus = new Vue();
    
    展开全文
  • 在父组件接收的时候,先把事件注销:Bus.$off(“saveTheme”),然后再接收 mounted(){ Bus.$off("saveTheme") Bus.$on("saveTheme", (themeList) => { console.log(themeList,"子") }) },
  • vue兄弟组件传值三种方法总结

    千次阅读 2019-08-12 15:52:00
    接下来介绍如何使用eventBus实现兄弟组件传值 首先我的需求是这样的,页面上由top,left,main,bottom四个组件构成。需要将top中的值传到left中。 第一步:创建一个js文件,eventBus.js,位置随便放,我是放在...
  • 在面试的过程中,被问到了vue兄弟组件传值是怎么进行的,因为技术不够只回答了效率很低的办法:子传父,父传子。自己上网查了下,发现大部分都是运用事件车的办法解决,创建中央事件总线。自己小小试着实现了下,...
  • 本demo主要是为了演示vue项目中兄弟组件之间的传值,这里我演示了两种方式: a. bus总线传值; b. 我自己一般把它当成常规的传值(其实也就是子组件A传父组件,父组件再传子组 件B) 下边开始本次demo的编写: 一. bus...
  • 兄弟组件传值 需要一个utils文件夹的eventBus.js import Vue from 'vue' export default new Vue() 兄弟页面1兄弟页面2 在需要引入bus 在主页面引入兄弟页面们跟Bus 传值 Bus.$emit("brotherA", "李钢筋嘤嘤嘤"); ...
  • 之前了解到了父组件传值给子组件(props),子组件传值给父组件($emit),对于兄弟组件间传值是通过他们的父组件作为介质传送的,相当麻烦,现在用bus(一个空的vue对象)作为介质传值更加方便。第一步:在assert...
  • 兄弟组件之间互相传值,需要建立一个“中转站”(新的vue实例),并且需要主动触发。 实例上的$on方法来接受监听。 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title...
  • 1:在项目中创建一个单独的eventBus.js文件 ...// transfer.vue(父组件) <template> <div class="container layer_nobetween"> <nav-tab /> <trans-chart /> </div> &
  • vue兄弟组件传值demo

    2021-05-08 18:03:44
    <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> , initial-scale=1.0"> <title>Documenttitle> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue....
  • vue兄弟组件传值的方法 主要通过event事件来传值: 传值的组件使用$emit发送事件 接受值的组件通过$on绑定事件接受 第一步 创建js文件 test.js import Vue from 'vue' export default new Vue() 在main.js中...
  • 1. 父传子 首先我们在component里创建一...// 子组件 ChildComponent.vue <template> <div> <h2>{{ title }}</h2> </div> </template> <script> export default { p
  • Vue兄弟组件传值

    2020-01-10 14:21:32
    效果:A页面向B页面传值,vueEvent.js是通道 1、新建vueEvent.js文件,引入vue后实例化vue,然后暴露这个实例 import Vue from 'vue' var VueEvent = new Vue() export default VueEvent 2、在A页面引入定义的实例 ...
  • 兄弟组件之间传递数据,使用vuex, 但是对于通信需求简单的组件之间,vue 官网提供了一种更简单的方法叫做 中央事件总线; 下面简单介绍一下中央事件总线的步骤及最近开发中使用中央数据总线遇到的问题。 一,创建...
  • 组件: 子组件 ----- {{msg}} props: ["msg"], //props接收 ** props:验证 ** props: { // fooA只接受数值类型的参数 fooA: Number, // fooB可以接受字符串和数值类型的参数 fooB: [String, Number], // fooC可以...
  • VUE 兄弟组件传值

    2021-12-25 09:23:55
    JS 文件 import Vue from 'vue'; const bus = new Vue();...在兄弟组件中引用JS import bus from "~~you url~~ "; 发送 bus.$emit('~~functionName~~ ',val) 接收 bus.$on('~~functionName~~ ',(res)=>{})

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,466
精华内容 2,186
关键字:

vue兄弟组件传值

vue 订阅