Vue 组件传值

一、父子组件传值

　在引用组件中被引用组件为子组件

　　1.父组件给子组件传值、传递方法、传递类

　　在父组件中引用header子组件　　<v-header  :homemsg="msg" :run='run' :home='this' ref='header'></v-header>

　　:homemsg="msg"　　//把父组件中的msg传给子组件　　　　　在子组件中用props["homemsg"]接收，然后就可以用{{homemsg}}给界面赋值

　　:run='run'　　run是一个方法，也可以把方法传给子组件　　　　在子组件中用props["homemsg","run"]接收，然后就可以调用方法，亦可以在调用方法是传值给父组件的方法

　　 :home='this'　　把整个类传过去，this代表当前组件　　在子组件中可以用props["homemsg","run","home"]接受，然后可以通过this.home.run()　　//值或者方法

　　　　　　props可以用来获取也可以用来判断值的合法性　　props{　'homemsg':string,}　　// 如果不是homemsg不是字符串类型也可以用，但是会打印提示报错

　　2.父组件主动获取子组件数据或方法、子组件获取父组件的数据或方法

　　　　　　调用子组件是定义一个ref　<v-header ref='header'></v-header>　在父组件中通过　this.$refs.header.run()　//方法或者数据

　　　　　　子组件调用父组件的数据和方法用　this.$parent.msg　//方法或者数据 　

二、非父子组建的传值

　　1.首先新建一个空的vue实例　　VueEvent.js　里的代码

　　　　import vue from 'vue';

　　　　var VueEvent = new vue();

　　　　export default VueEvent;

　　2.在需要通讯的两个组件中引入vue实例

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

　　3.广播和接收广播

　　广播：  VueEvent.$emit('toxinwen',this.msg)

接收广播：　VueEvent.$on('toxinwen',function(data){

　　　　　　console.log(data);

　　　　　　});