Vue组件间的传值

• 父子组件传值

父组件调用子组件时动态绑定属性：<v-header v-bind:title="title"></v-header>

子组件通过props接受父组件传递来的数据props:['title']  or  props:{title:String}

子组件直接使用{{title}}

• 父组件主动获取子组件的值

调用子组件时定义一个ref：<v-header ref="header"></v-header>

在父组件里通过this.$refs.header.属性/方法，获取子组件的属性或方法

• 子组件主动获取父组件的值

在子组件里通过this.$parent.属性/方法 获取父亲组件的属性和方法

• 非父组组件间的传值（事件广播）

子组件A给子组件B广播数据：

组件A中：1.引入vue实例;

                 2.发送广播：methods:{setData(){

                                                 VueEvent.$emit('to-news',this.msg);}}

           组件B中：1.引入vue实例；

                            2.接受广播：mounted(){

                                                 VueEvent.$on('to-news',function(data){

                                                 console.log(data);})}

注：VueEvent为创建的Vue实例