美文网首页
vue组件之间传值

vue组件之间传值

作者: GaoXiaoGao | 来源:发表于2020-09-15 09:09 被阅读0次

    1.父组件给子组件传值

    1.在父组件调用子组件调用时,绑定动态属性
    例:<v-header :title="title"></v-header>
    2.在子组件中通过props接收父组件传过来的值

    2. 父组件主动获取子组件的数据和方法及子组件主动获取父组件的数据和方法

    1.调用子组件时定义ref <v-header ref="header"></v-header>
    2.在父组件中使用
    this.$refs.header.属性或方法

    子组件获取父组件方法
    this.$parent.数据或方法

    3.兄弟组件之间传递

    1.定义一个js文件,引入vue,实例化vue并暴露vue实例
    vueEvent.js

    import Vue from 'vue';
    var VueEvent = new Vue();
    export default VueEvent;
    

    2.在需要广播的地方引入上面定义的vue实例
    通过$emit('key',value)广播数据

    import VueEvent from '../model/vueEvent.js'
    
    //在methods中的方法中广播事件
     emitNews(){
              VueEvent.$emit('to-news',this.msg);
            }
    

    3.在需要接受的地方引入上面定义的vue实例
    在方法中通过$on('key',funchtion(){})接收数据

    import VueEvent from '../model/vueEvent.js'
    
    在methods中的方法
    VueEvent.$on('to-home',function(data){
                console.log(data);
        });
    

    相关文章

      网友评论

          本文标题:vue组件之间传值

          本文链接:https://www.haomeiwen.com/subject/mkvvektx.html