• Vue 在同级组件中传值($emit、$on 的使用)


    利用 bus 总线机制(发布订阅模式/观察者模式)

    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
            <div id="app">
                <dom-a></dom-a>
                <dom-b></dom-b>
                <dom-c></dom-c>
            </div>
            <script type="text/javascript" src="../js/vue.min.js"></script>
            <script type="text/javascript">
                Vue.prototype.bus = new Vue();
    
                var A = {
                    data() {
                        return {
                            a: '我是a组件中的数据'
                        }
                    },
                    template: `
                        <div>
                            <span>我是A组件的数据->{{a}}</span>
                            <input type="button"  value = '把A数据传给C' @click = 'send'/>
                        </div>
                    `,
                    methods: {
                        send() {
                            // $emit('事件名字',数据)
                            // this.$emit()
                            console.log(this);
                            this.bus.$emit('a-msg', this.a);
    
                        }
                    }
                };
                var B = {
                    data() {
                        return {
                            b: '我是b组件中的数据'
                        }
                    },
                    template: `
                        <div>
                            <span>我是A组件的数据->{{b}}</span>
                            <input type="button"  value = '把B数据传给C' @click = 'send'/>
                        </div>
                    `,
                    methods: {
                        send() {
                            console.log(this);
                            this.bus.$emit('b-msg', this.b);
                        }
                    }
                };
    
                var C = {
                    data() {
                        return {
                            a: '',
                            b: ''
                        }
                    },
                    template: `
                        <div>
                            <h3>我是C组件</h3>
                            <span>接收A组件的数据为:{{a}}</span>
                            <br />
                            <span>接收B组件的数据为:{{b}}</span>
                        </div>
                    `,
                    mounted() {
                        // 接收A中的数据
                        // $on('事件名',fn(a))
                        this.bus.$on('a-msg', (a) => {
                            this.a = a;
                        });
                        // 接收A中的数据
                        this.bus.$on('b-msg', (b) => {
                            this.b = b;
                        });
                    },
                }
                new Vue({
                    el: '#app',
                    components: {
                        'dom-a': A,
                        'dom-b': B,
                        'dom-c': C
                    }
                })
            </script>
        </body>
    </html>
  • 相关阅读:
    MyEclipse 2014 破解图文详细教程
    Eclipse构建Maven项目
    Eclipse构建Maven项目
    Spring--环境配置
    Spring--环境配置
    Sencha Touch2 -- 11.1:定义具有关联关系的模型
    Sencha Touch2 -- 11.1:定义具有关联关系的模型
    Android百度定位API的使用
    Android百度定位API的使用
    Java基础学习总结(64)——Java内存管理
  • 原文地址:https://www.cnblogs.com/jwen1994/p/10993446.html
Copyright © 2020-2023  润新知