精华内容
下载资源
问答
  • VUE 兄弟组件通信
    2019-07-17 21:21:10

    VUE 兄弟组件通信

    首先VUE并没有给兄弟组件直接通信封装任何方法,

    如果是兄弟组件或者更复杂的组件之间传值我们可以使用VUEX进行状态管理

    但是有一次取58同城面试

    问我如果不用VUEX,兄弟组件怎么传值

    我当时比较紧张,一下子有点蒙

    我回答的是使用mixins方式,双方传入一个公共js

    在公共js中定义一个数据对象进行通信(这个方案我当时也不十分确定,面试官当时听我说完好像也是有点儿懵,假装点点头)

    面试完我立刻进行了一次review,尝试了这种方式,mixins全局混入确实能够实现给双方同时传值,但是不能实现组件之间相互传值

    我查了一下网上的说法,定义一个公共js然后import引入
    js中需要new Vue(),这个我就不详细说了网上一大堆有的是
    这种方式的专有名词叫做 中央事件总线

    我觉得上面方案的不是最优的
    于是我从 react中吸取了一些思想
    将两个兄弟组件的公共父组件作为中间件
    在公共父组件data中定义一个公共变量供其使用
    然后这两个兄弟组件通过 $parent 引用这个父级变量进行存取值
    这样就能实现两个兄弟组件间的实时通信了

    更多相关内容
  • 本篇文章主要介绍了Vue 兄弟组件通信的方法(不使用Vuex),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 接着在新创建的BrotherCard、SisterCard组件导入main.js: <script> import { eventBus } from '../main' </script> <!-- SisterCard.vue --> <template> <

    首先在main.js文件中定义一个新的eventBus对象,其实他是一个全新的Vue实例:

    export const eventBus = new Vue()

    接着在新创建的BrotherCard、SisterCard组件导入main.js

    <script>
    
        import { eventBus } from '../main'
    
    </script>
    <!-- SisterCard.vue -->
    <template>
        <div class="message">
            <div class="message-header">
                <h5 v-text="theCardTitle"></h5>
            </div>
            <div class="message-body">
                <p class="message-text">我是Sister组件</p>
                <button @click="messageBrother" class="btn">给哥哥发消息</button>
     
                <div v-if="fromBrother" class="alert" v-html="fromBrother"></div>
            </div>
        </div>
    </template>
     
    <script>
        import { eventBus } from "../main";
     
        export default {
            name: "SisterCard",
            data: () => ({
                theCardTitle: "Sister Card",
                fromBrother: ""
            }),
            methods: {
                messageBrother() {
                    eventBus.$emit("sisterSaid", "妈妈说,该做作业了!(^_^)!!!");
                }
            },
            created() {
                eventBus.$on("brotherSaid", message => {
                    this.fromBrother = message;
                });
            }
        };
    </script>
     
    <!-- BrotherCard.vue -->
    <template>
        <div class="message">
            <div class="message-header">
                <h5 v-text="theCardTitle"></h5>
            </div>
            <div class="message-body">
                <p class="message-text">我是Brother组件</p>
                <button @click="messageSister" class="btn">给妹妹发消息</button>
     
                <div v-if="fromSister" class="alert" v-html="fromSister"></div>
            </div>
        </div>
    </template>
     
    <script>
        import { eventBus } from "../main.js";
     
        export default {
            name: "BrotherCard",
            data: () => ({
                theCardTitle: "Brother Card",
                fromSister: ""
            }),
            methods: {
                messageSister() {
                    eventBus.$emit("brotherSaid", "妈妈说,该做作业了!(^_^)!!!");
                }
            },
            created() {
                eventBus.$on("sisterSaid", message => {
                    this.fromSister = message;
                });
            }
        };
    </script>
    

    展开全文
  • vue 兄弟组件通信

    2021-03-09 09:15:23
    import Vue from 'vue'; export default new Vue(); import event form 'event.js' event .$emit('active','chuangzi')//自定义事件 event .$on('active','触发方法')//监听自定义事件 event .$off('active')/...

    event.js

    import Vue from 'vue';
    
    export default new Vue();
    
    import event form 'event.js'
    
     event .$emit('active','chuangzi')//自定义事件
     event .$on('active','触发方法')//监听自定义事件
     event .$off('active')// 移除自定义事件监听器
     //如果没有提供参数,则移除所有的事件监听器;
    
    //如果只提供了事件,则移除该事件所有的监听器;
    
    //如果同时提供了事件与回调,则只移除这个回调的监听器。
    
    
    展开全文
  • Vue兄弟组件通信

    2021-05-21 14:03:16
    创建兄弟组件1 <template> <div @click="sendMsg"> </div> </template> ...省略 import bus from '@/utils/bus.js" methods:{ sendMsg(){ bus.$emit("receiveMsg","hello!I'm from Se

    创建需要通信的中间bus.js文件

    import Vue from 'vue'
    export default new Vue
    
    

    创建兄弟组件1

    <template>
    	<div @click="sendMsg"> </div>
    </template>
    ...省略
    import bus from '@/utils/bus.js"
    
    methods:{
    	sendMsg(){
    		bus.$emit("receiveMsg","hello!I'm from SendMsg")
    	},
    }
    

    创建兄弟组件2

    <template>
    	<div></div>
    </template>
    ...省略
    import bus from '@/utils/bus.js"
    # 钩子函数mounted
    mounted:{
    	bus.$on("receiveMsg",msg=>{
    		console.log(msg)
    	})
    }
    
    展开全文
  • 使用bus事件中心(空的vue对象; 方便起见: 新建文件bus.js文件 import Vue from 'Vue';...兄弟组件1 <template> <div> <button @click="sendmsgToMyBrother">向我兄弟传值</button> ...
  • 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件...
  • Vue 兄弟组件之间的通信 参考:https://blog.csdn.net/weixin_39763493/article/details/107182252 1. Vue中实现兄弟组件的通讯一般为2种方式: 一种方法是让父组件允当两个子组件之间的中间件(中继); 另一种...
  • Vue 兄弟组件通信

    2021-04-07 22:54:06
    Vue兄弟通信 定义A组件 <template> <div> <p>A组件</p> <div>{{val}}</div> <button @click="btn">A组件按钮</button> </div> </template> <...
  • Vue 兄弟组件通信(不使用Vuex)

    千次阅读 2018-09-20 19:30:21
    方法一、建立bus中间机制,兄弟组件$emit 和$on进行通信 方法二、子传父,然后父传子。 其实两种方法原理相似。   我采用了方法二。 a组件中触发父组件b的isRepotags事件传递res.data[0].repotags   ...
  • Vue 兄弟组件通信(不使用Vuex)项目中,我们经常会遇到兄弟组件通信的情况。在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex。下面简单介绍一下使用...
  • Vue - 兄弟组件通信(eventBus)

    千次阅读 2022-03-22 10:34:38
    父子组件之间通信需求很常见,本文主要介绍两个毫无关联的兄弟组件之间通信。 使用 EventBus 事件总线,它允许两个子组件直接通信, 并且不需要涉及父组件,耦合低故推荐。 第一步 在组件之外定义一个全新 Vue ...
  • Vue兄弟组件之间通信

    千次阅读 2020-07-08 14:38:34
    上一篇我给大家介绍了Vue父子组件之间的通信,那么接下来我给大家说下兄弟组件之间又是如何进行通讯的呢? Vue中实现兄弟组件的通讯一般为2种方式,一种方法是让父组件允当两个子组件之间的中间件(中继);另一种...
  • 主要给大家介绍了关于Vue组件间通信的相关资料,其中包括父子组件、兄弟组件及祖先后代组件间的通信,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习...
  • vue兄弟组件通信问题:$emit和$on

    千次阅读 2018-02-02 13:40:42
    在前端,不管我们做什么样的...在简单的场景下,可以使用一个空的 Vue 实例作为事件总线,具体的官方文档可看非父子组件通信 。官方文档很简洁,但是像我这种菜鸟看的是一脸懵逼,官方的例子也没有(估计是认为太简单了
  • vue提供父子组件通信,父子组件之间通信主要通过:父传子——prop、字传父——$emit、调用上一级或者上上级:$parent、调用最顶级:$root、父组件调用子组件的方法:$children或$refs 兄弟传值——vue-bus 解决: ...
  • vue组件通信方式(兄弟组件)

    千次阅读 2020-03-29 21:02:55
    今天回顾一下vue组件中兄弟组件如何实现通信 一、ref实现组件通信 //在兄弟组件之间的通信,可以采用关系链和ref链去使用,解决兄弟之间通信问题。 //html布局 <div id="app"> <big-brother ></...
  • 今天碰到了这个问题,两个毫无关联的组件之间需要通信,怎么办!使用 props 一层一层的传肯定是有问题的,当然可以实现,在一个就是Vuex,定义一个公共变量也是可以的,但是相对来说比较好的实现方式就是 eventBus ...
  • Vue兄弟组件之间进行通信 1、 先将组件1的数据传给父组件 //组件1中定义方法send()将数据传给父组件 send(){ this.$emit('data-msg',this.message); } // 父组件通过定义事件响应获取组件1数据 @data-msg="msg2($...
  • vue兄弟组件通信

    2019-09-29 15:25:26
    所有需要通信组件共用一个事件对象。new Vue(),新new一个vue对象,然后所有组件都访问这个对象,通过这个对象$emit事件,也通过这个对象$on监听事件。 实现一:直接在单文件里面实例化根Vue的时候,在data里...
  • 兄弟他们有着共同的父亲,在它们自己组件实例身上有一个$parent属性指向它们共同的 父组件,专栏中在全局事件总线那一篇博客介绍了vue组件身上有$on,$emit,$off三个api。 实现消息发布与订阅模式,实际上这也是...
  • 主要介绍了vue实现父子组件之间的通信以及兄弟组件通信功能,结合实例形式分析了vue.js组件间通信相关操作技巧,需要的朋友可以参考下
  • 第一种:eventBus 新建一个js文件, 我这里叫做 bus.js; 文件内容: import Vue from 'vue';...最后在你需要的通信的另一个组件中 mounted生命周期钩子中执行如下: bus.$on('触发名称', res => { /
  • 一,子组件传递父组件,再父组件传递子组件组件向父组件传值$emit <son @click="childClick">{{childValue}}</son> export default { data () { return { childValue: '我是子组件的数据' } }, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,859
精华内容 2,743
关键字:

vue兄弟组件通信

友情链接: wjnctipnal_procdures.rar