vue组件之间传值

2020-09-15  本文已影响0人  GaoXiaoGao

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);
    });
上一篇下一篇

猜你喜欢

热点阅读