美文网首页
非父子传值

非父子传值

作者: 郭佳伟666 | 来源:发表于2018-09-23 19:37 被阅读0次

    箭头函数:箭头函数就是没有function关键字,而是一个类似箭头的函数:

    var a = ()=>{
      return 1;
    }
    

    相当于:

    function a(){
      return 1;
    }
    
    mounted

    注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick替换掉 mounted

    第三方量:var bus =new vue()
    1.点击弹出效果
    HTML部分
     <div id='app'>
           <child></child>
           <son></son>
     </div>
    
    JS部分
     <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>
    
    效果图:
    image.png

    相关文章

      网友评论

          本文标题:非父子传值

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