同级传

作者: yangmengjiao | 来源:发表于2018-09-24 10:48 被阅读0次

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <child></child>
            <son></son>
        </div>
        <script src="../vue(01)/js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var sent=new Vue();
            
            Vue.component('child',{
                template:
                        `
                        <div>
                        <h2>是child的</h2>
                        <button @click='chuan'>传送给son</button>  
                        </div>
                        `
                        ,
                data:function(){
                    return{
                        meg:'是child的组件，传给son组件'
                        
                    }
                },
                methods:{
                    chuan:function(){
                         sent.$emit('send',this.meg)
                    }
                    
                }
            })
            
            
            Vue.component('son',{
                template:
                        `
                        <div>
                        <h2>son组件</h2>
                        <a>{{miss}}</a> 
                        </div>
                        
                        `
                        ,
                data:function(){
                    return{
                        miss:''
                    }
                    
                },
                mounted:function(){
                    sent.$on('send',meg=>{
                        this.miss=meg
                    })
                }
                
            })
            
            new Vue({
                el:'#app'
            })
        </script>
    </body>
</html>