zoukankan      html  css  js  c++  java
  • vue30-单一事件管理组件通信: vuex

    ------------------------------------------------------
    可以单一事件管理组件通信:    vuex
        var Event=new Vue();
    
        Event.$emit(事件名称, 数据)
    
        Event.$on(事件名称,function(data){
            //data
        }.bind(this));
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>智能社——http://www.zhinengshe.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <style>
    
        </style>
        <script src="vue.js"></script>
        <script>
            //准备一个空的实例对象
            var Event=new Vue();
    
    
            var A={    //A组件
                template:`
                    <div>
                        <span>我是A组件</span> -> {{a}}
                        <input type="button" value="把A数据给C" @click="send">
                    </div>
                `,
                methods:{
                    send(){
                        Event.$emit('a-msg',this.a);
                    }
                },
                data(){
                    return {
                        a:'我是a数据'
                    }
                }
            };
            var B={
                template:`
                    <div>
                        <span>我是B组件</span> -> {{a}}
                        <input type="button" value="把B数据给C" @click="send">
                    </div>
                `,
                methods:{
                    send(){
                        Event.$emit('b-msg',this.a);
                    }
                },
                data(){
                    return {
                        a:'我是b数据'
                    }
                }
            };
            var C={
                template:`
                    <div>
                        <h3>我是C组件</h3>
                        <span>接收过来的A的数据为: {{a}}</span>
                        <br>
                        <span>接收过来的B的数据为: {{b}}</span>
                    </div>
                `,
                data(){
                    return {
                        a:'',
                        b:''
                    }
                },
                mounted(){
                    //var _this=this;
                    //接收A组件的数据
                    Event.$on('a-msg',function(a){
                        this.a=a;
                    }.bind(this));
    
                    //接收B组件的数据
                    Event.$on('b-msg',function(a){
                        this.b=a;
                    }.bind(this));
                }
            };
    
    
            window.onload=function(){
                new Vue({
                    el:'#box',
                    components:{
                        'com-a':A,
                        'com-b':B,
                        'com-c':C
                    }
                });
            };
        </script>
    </head>
    <body>
        <div id="box">
            <com-a></com-a>
            <com-b></com-b>
            <com-c></com-c>
        </div>
    </body>
    </html>
    
    <!--
    我是A组件 -> 我是a数据  把A数据给C
    我是B组件 -> 我是b数据  把B数据给C
    我是C组件
    
    接收过来的A的数据为: 我是a数据 
    接收过来的B的数据为: 我是b数据
    -->
  • 相关阅读:
    For each···in / For···in / For···of
    JavaScript object
    specific word count (index of )
    history of program
    js的回调函数
    promise
    js的事件流事件机制
    js的closures(闭包)
    baidu-map
    基于封装优点的类设计习惯
  • 原文地址:https://www.cnblogs.com/yaowen/p/6986902.html
Copyright © 2011-2022 走看看