vue中父子组件传值和非父子组件传值

1、父组件向子组件传值：
在子组件标签中添加属性 <v-header :title="title"></v-header>
在子组件跟data平级的地方定义 props:[ ‘title’] 或props:{ }
还可以传方法

2、父组件主动获取子组件的数据和方法
首先在定义子组件时添加一个ref 如：<v-header ref="title"></v-header>
在父组件里 this.$refs.title.属性/方法

3、子组件主动获取父组件的数据和方法
在子组件自定义方法里： this.$parent.数据/方法

4、非父子组件传值
要修改的文件
├── src
│ ├── App.vue
│ ├── components
│ │ ├── Home.vue
│ │ └── News.vue
│ └── model
│ └── VueEvent.js

《1 创建js文件，引入vue，实例化vue，暴露这个实例

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

《2 在要广播的地方引入定义的实例

import VueEvent from ‘…/model/VueEvent.js’

《3 通过VueEvent.$emit(‘名称’, ‘数据’)

VueEvent.$emit(‘to-news’, this.msg)

《4 在接受数据的地方通过$on监听

export default {
data(){
},
mounted(){
VueEvent.$on(‘to-home’, function(data){
console.log(data)
})
}
}