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

Posted 2021-02-07 丁春秋

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

之前结果:

传递之后的值:

以上是关于vue.js组件之j间的通讯三,通过单一事件来管理组件通讯的主要内容，如果未能解决你的问题，请参考以下文章

vue.js组件之j间的通讯一子组件接受父祖件数据