vue 组件间传值方式

/*

父组件给子组件传值

1.父组件调用子组件的时候 绑定动态属性
<v-header :title="title"></v-header>

2、在子组件里面通过 props接收父组件传过来的数据

*/


/*
父组件给子组件传值

1.父组件调用子组件的时候 绑定动态属性
<v-header :title="title"></v-header>

2、在子组件里面通过 props接收父组件传过来的数据
props:['title']

props:{

'title':String
}

3.直接在子组件里面使用

父组件主动获取子组件的数据和方法:

1.调用子组件的时候定义一个ref

<v-header ref="header"></v-header>

2.在父组件里面通过

this.$refs.header.属性

this.$refs.header.方法

子组件主动获取父组件的数据和方法:


this.$parent.数据

this.$parent.方法

*/

/*
子组件主动获取父组件的数据和方法:


this.$parent.数据

this.$parent.方法


*/
// alert(this.$parent.msg);

//this.$parent.run();

/*非父子组件传值
1、新建一个js文件 然后引入vue组件  实例化vue 最后暴露这个实例

import Vue from 'vue';

var VueEvent = new Vue();

export default VueEvent;


2、在要广播的地方引入刚才定义的实例

import VueEvent from '../model/VueEvent.js';


3、通过 VueEmit.$emit('名称','数据')


4、在接收收数据的地方通过 $om接收广播的数据
VueEmit.$on('名称',function(){


})


*/

猜你喜欢

转载自www.cnblogs.com/jasonLiu2018/p/11070735.html