zoukankan      html  css  js  c++  java
  • Vuejs 用$emit 与 $on 来进行兄弟组件之间的数据传输

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>Vue2-单一事件管理组件通信</title>
        <script src="vue.js"></script>
        <script type="text/javascript">
    
        //准备一个空的实例对象
        var Event = new Vue();
    
        //组件A
        var A = {
            template: `
                <div>
                    <span>我是A组件的数据->{{a}}</span>
                    <input type="button" value="把A数据传给C" @click = "send">
                </div>
            `,
            methods: {
                send () {
                    Event.$emit("a-msg", this.a);
                }
            },
            data () {
                return {
                    a: "我是a组件中数据"
                }
            }
        };
        //组件B
        var B = {
            template: `
                <div>
                    <span>我是B组件的数据->{{a}}</span>
                    <input type="button" value="把B数据传给C" @click = "send">
                </div>
            `,
            methods: {
                send () {
                    Event.$emit("b-msg", this.a);
                }
            },
            data () {
                return {
                    a: "我是b组件中数据"
                }
            }
        };
        //组件C
        var C = {
            template: `
                <div>
                    <h3>我是C组件</h3>
                    <span>接收过来A的数据为: {{a}}</span>
                    <br>
                    <span>接收过来B的数据为: {{b}}</span>
                </div>
            `,
            mounted () {
               //接收A组件的数据
               Event.$on("a-msg", function (a) {
                    this.a = a;
               }.bind(this));
    
               //接收B组件的数据
               Event.$on("b-msg", function (a) {
                    this.b = a;
               }.bind(this));
            },
            data () {
                return {
                    a: "",
                    b: ""
                }
            }
        };
        window.onload = function () {
            new Vue({
                el: "#box",
                components: {
                    "dom-a": A,
                    "dom-b": B,
                    "dom-c": C
                }
            });
        };
    
    
        </script>
    </head>
    <body>
        <div id="box">
            <dom-a></dom-a>      
            <dom-b></dom-b>      
            <dom-c></dom-c>      
        </div>
    
    </body>
    </html>
  • 相关阅读:
    [转] jQuery 操作 JSON 数据
    [转] 8张图学习javascript
    HTML文档类型声明的坑...
    Android 应用内HttpClient 与 WebView 共享 Cookie
    李嘉诚无锡演讲
    keytool 生成 Android SSL 使用的 BKS
    LeetCode-344-反转字符串
    LeetCode-342-4的幂
    LeetCode-338-比特位计数
    LeetCode-326-3的幂
  • 原文地址:https://www.cnblogs.com/mafeng/p/7804080.html
Copyright © 2011-2022 走看看