美文网首页
非父子传值 生命周期

非父子传值 生命周期

作者: 喔爹 | 来源:发表于2018-09-23 19:52 被阅读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>
    

    相关文章

      网友评论

          本文标题:非父子传值 生命周期

          本文链接:https://www.haomeiwen.com/subject/fdyqoftx.html