vue组件挂载及传值（父子组件及兄弟组件）

一、挂载及卸载.vue文件

1.引入组件

import byLife from '../common/bylife.vue'; //同级目录用./，不同级目录用../

2.挂载引入的头部组件

 components:{
        'v-life':byLife
    },

3.在模板中使用(v-if 判断是否挂载及卸载)

<v-life v-if="flag"></v-life>
 <button @click="flag=!flag">挂载以及卸载life组件</button>
 flag:true,

二、组件之间的传值

1.父组件向子组件传值：

1.父组件调用子组件的时候 绑定动态属性及方法
        <v-header :title="title" :newMsg="msg" :run="run" :new="this"></v-header>
2、在子组件里面通过 props接收父组件传过来的数据
        props:['title','newMsg','run','new']
3、通过父组件给子组件的传值，来获取父组件的数据，执行父组件的方法
        alert("获取的父组件数据" +this.title+this.new.title);
        this.new.run("123");
4、子组件主动获取父组件的数据和方法(父组件没有给子组件传值)
        this.$parent.newMsg
        this.$parent.run();
5、父组件主动获取子组件的数据和方法
    1.调用子组件的时候，定义一个ref
        <v-header ref="head"></v-header>
        //当然也可以给子组件传其他值
        <v-header ref="head" :title="title" :newMsg="msg" :run="run" :new="this"></v-header>
    2.在父组件中，通过以下来调用子组件的属性和方法
        this.$refs.head.属性
        this.$refs.head.方法
        //父组件主动获取子组件的数据和方法(这里的head是上面定义的ref)
        alert(this.$refs.head.msg);
        this.$refs.head.runHeader();

2.兄弟组件之间的传值

1、新建一个js文件(bus.js)
    //引入vue
    import Vue from 'vue';
    //实例化vue
    const bus = new Vue();
    //暴露这个实例
    export default bus;
2、在要广播的地方引入刚才定义的实例
    //引入广播传值的vue实例
    import bus from '../../common/bus.js'
3、通过 VueEmit.$emit('名称','数据')发送通知
    emitNews(){//给兄弟组件news发送广播数据
            bus.$emit('to-news',this.msg);
        }
4、在接收收数据的地方通过 $om接收广播的数据
    VueEmit.$on('名称',function(){
    mounted(){
        //监听home给自己的广播数据
        bus.$on('to-news',function(data){
            console.log("news收到的home广播过来的数据"+data);
        })
    }