非父子传值 生命周期

2018-09-23  本文已影响0人  喔爹
非父子传值 


<div id="app">
            <dad></dad>
            <son></son>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var bus = new Vue()
            Vue.component('dad',{
                template:`
                    <div>
                        <h1>啊啊啊啊啊</h1>
                    </div>
                `,
                data:function(){
                    return{
                        mg:'hello Word'
                    }
                },
                methods:{
                    sendmg:function(){
                        bus.$emit('send',this.mg)
                    }
                }
            })
            Vue.component('son',{
                template:`
                    <div>
                        <h1>嗯嗯嗯嗯</h1>
                        <a href="">{{me}}</a>
                    </div>
                `,
                data:function(){
                    return{
                        me:''
                    }
                },
                methods:{
                    sendme:function(){
                        bus.$on('send',mg=>{
                            console.log(this);
                            this.mg=me
                        })
                    }
                }
            })
            
            
            new Vue({
                el:'#app'
            })
        </script>
生命周期


 <div id='app'>{{msg}}</div>
    <script src='js/vue.js'></script>
    <script>
       new Vue({
           el:'#app',
           data:{
               msg:'hello vue'
           },
           beforeCreate:function(){
               alert('beforeCreated');
           },
           created:function(){
               alert('created')
           },
           beforeMount:function(){
                 alert('beforMount')
           },
           mounted:function(){
               alert('mounted')
           }
       })
    </script>
上一篇 下一篇

猜你喜欢

热点阅读