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

vue非父子传值,生命周期

作者: 张鑫冲 | 来源:发表于2018-09-23 19:40 被阅读0次
    mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
    Vue非父子之间传值例子:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>
       <div id='app'>
           <child></child>
           <son></son>
       </div>
       <script src="../js/vue.js"></script>
        <script>
           var bus=new Vue();
           Vue.component('child',{//A
               template:`
                <div>
                   <h1>我是child组件</h1>
                   <button @click='sendMsg'>发送数据给son</button>
                </div>
               `,
               data:function(){
                   return{
                       msg:'hello vue'
                   }
               },
               methods:{
                   sendMsg:function(){
                      bus.$emit('send',this.msg) 
                   }
               }
           }) 
            
           Vue.component('son',{//B
               template:`
                <div>
                   <h1>我是son组件</h1>
                   <a href=''>{{mess}}</a>
                </div>
               `,
               data:function(){
                   return{
                       mess:''
                   }
               },
               mounted:function(){
                   bus.$on('send',msg=>{//箭头函数
                       console.log(this);
                       this.mess=msg
                   })
               }
               
           }) 
            
           new Vue({
               el:'#app'
           })
           
        </script>
    </body>
    </html>
    

    效果图: QQ拼音截图未命名.png

    2,生命周期:

    beforeCreate:function() {

    }( beforeCreate:创建前的状态)

    created::function() {

    }(created:创建完毕状态)

    beforeMount: function() {

    }(beforeMount:挂载结束后状态)

    beforeUpdate: function () {

    }(beforeUpdate:更新完成状态)

    beforeDestroy: function () {

    }(beforeDestroy:销毁前状态)

    destroyed: function () {

    }(destroyed:销毁完成状态)

    相关文章

      网友评论

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

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