Vue父子组件传值

一、父组件给子组件传值

​ 1、父组件调用子组件的时候，绑定动态属性

/*传值可以是值“title”、是方法“run”、是组件“this”*/
<v-header :title="title" :run="run" :home="this"></v-header>

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

<script>
    export default{
	props:['title','run','home']
}
</script>

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

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

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

2、在父组件里面通过以下方式获取属性和方法

this.$refs.header.属性
this.$refs.header.方法

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

this.$parent.数据
this.$parent.方法

四、非父子组建传值

1、新建一个js文件 然后引入vue 实例化vue最后暴露这个实例

VueEvent.js

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

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

home.vue

<script>
	import VueEvent from './VueEvent.js';
    export default{
        methods:{
            emitNews(){
                /*广播数据*/
                VueEvent.$emit('to-news',this.数据)
            }
        }
}
</script>

3、在要接收数据的地方接受广播

news.vue

<script>
	import VueEvent from './VueEvent.js';
    export default{
        /*在生命周期函数里写，编译的时候就调用*/
        mounted(){
            /*接受广播*/
            VueEvent.$on('to-news',function(data){
                console.log(data);
            })
        }
}
</script>