组件传值——同级互传、生命周期

同级互传用第三方量 var bus=new Vue();

<div class="box">
            <one></one>
            <two></two>
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script>
            var bas=new Vue()
            Vue.component("one",{
                template:`
                    <div>
                        <p>我是老大</p>
                        <button @click="add">点击</button>
                    </div>
                `,
                data:function(){
                    return{
                        msg:"你是谁"
                    }
                },
                methods:{
                    add:function(){
                        bas.$emit("btn",this.msg)
                    }
                }
            })
            Vue.component("two",{
                template:`
                    <div>
                        <p>我是老二</p>
                        <a href="#">{{mess}}</a>
                    </div>
                `,
                data:function(){
                    return{
                        mess:""
                    }
                },
                mounted:function(){
                    bas.$on("btn",mmm=>{
                        this.mess=mmm
                    })
                }
            })
            new Vue({
                el:".box"
            })
        </script>

生命周期

生命周期中有钩子函数（即生命过程）

1）beforeCreate未建立 2）create 已建立 3）beforeMount未加载数据 4）mounted已加载数据 5）beforeupdated未更新 6）updated更新
7）beforeDestroy未销毁 8）destroy已销毁

<div class="box">
            <p>{{msg}}</p>
        </div>
        <script type="text/javascript" src="js/vue.js" ></script>
        <script>
            new Vue({
                el:".box",
                data:{
                    msg:"hello vue"
                },
                beforeCreate:function(){
                    alert("beforecreate")
                },
                created:function(){
                    alert("created")
                },
                beforeMount:function(){
                    alert("beforemount")
                },
                mounted:function(){
                    alert("mounted")
                }
                
            })
        </script>