vue.js组件之j间的通讯三,通过单一事件来管理组件通讯 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <com-a></com-a>
            <com-b></com-b>
            <com-c></com-c>    
        </div>
        
    </body>
    <script>
        var A={
            template:`
                <div>
                    <span>我是组件A</span> -->{{a}}
                    <input type ="button" value ="把A数据传给C">
                </div>
            `,
            data(){
                return{
                    a:'我是a数据'
                }
            }
        };
        var B={
            template:`
                <div>
                    <span>我是组件B</span> -->{{b}}
                    <input type ="button" value ="把B数据传给C">
                </div>
            `,
            data(){
                return{
                    b:'我是b数据'
                }
            }
            
        };
        var C={
            template:`
                <div>
                    <span>我是组件C</span> -->{{c}}
                    <input type ="button" value ="把C数据传给A">
                </div>
            `,
            data(){
                return{
                    c:'我是c数据'
                }
            }
        };
        
        var app =new Vue({
            el:"#app1",
            data:{
                
                    a:'我是父组件的数据'
                
                
                
            },
            /*//子组件,利用props进行数据传递:*/
            components:{
                'com-a':A,
                'com-b':B,
                'com-c':C
            }
        });    
    </script>
</html>

案例基础页面:

展示结果:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    </head>
    <body>
        <div id="app1">
            <com-a></com-a>
            <com-b></com-b>
            <com-c></com-c>    
        </div>
        
    </body>
    <script>
        /*全局的*/
        var vm =new Vue();
        
        var A={
            template:`
                <div>
                    <span>我是组件A</span> -->{{a}}
                    <input type ="button" value ="把A数据传给B" @click="send">
                </div>
            `,
            data(){
                return{
                    a:'我是a数据'
                }
            },
            methods:{
                send(){
                    vm.$emit('a-msg',this.a)
                }
            }
        };
        var B={
            template:`
                <div>
                    <span>我是组件B</span> -->{{b}}
                    <input type ="button" value ="把B数据传给C">
                </div>
            `,
            mounted(){
                vm.$on('a-msg',function(a){
                    alert(a);
                    this.b =a;
                    /*将this绑定给当前函数,引用当前函数*/
                }.bind(this));
            },
            data(){
                return{
                    b:'我是b数据'
                }
            }
            
        };
        var C={
            template:`
                <div>
                    <span>我是组件C</span> -->{{c}}
                    <input type ="button" value ="把C数据传给A">
                </div>
            `,
            data(){
                return{
                    c:'我是c数据'
                }
            }
        };
        
        var app =new Vue({
            el:"#app1",
            data:{
                
                    a:'我是父组件的数据'
                
                
                
            },
            /*//子组件,利用props进行数据传递:*/
            components:{
                'com-a':A,
                'com-b':B,
                'com-c':C
            }
        });    
    </script>
</html>

之前结果:

传递之后的值:

 

posted @ 2019-02-02 23:50  菩提树下的丁春秋  阅读(209)  评论(0)  编辑  收藏  举报