zoukankan      html  css  js  c++  java
  • 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?

    首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 .

    能通过 props 向子组件传递数据其实是因为子组件 暴露 出了这个属性到 外部, 但子组件并不知道是谁把数据传过来的.

    要把数据传回给父组件, 那就需要 自定义事件, 这相当于是给子组件安了一个 监视器 , 使得父组件可以 监测 到子组件的一举一动, 这样也就可以拿到子组件的数据了.

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
        <title>Vue Test</title>
    </head>
    
    <body>
        <div id="app">
            <div id="counter-event-example">
                <p>{{ total }}</p>
                <!-- 父组件绑定子组件的自定义事件: increment -->
                <button-counter v-on:increment="incrementTotal"></button-counter>
                <button-counter v-on:increment="incrementTotal"></button-counter>
            </div>
        </div>
    
        <script>
            Vue.component('button-counter', {
                template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
                // 这里的 data 不是一个对象, 而是一个可以返回一个对象的函数
                // 好处是每个实例可维护一份被返回对象的独立拷贝,若 data 为对象则会影响其他实例
                data: function () {
                    return {
                        counter: 0
                    }
                },
                methods: {
                    incrementHandler: function () {
                        this.counter += 1;
                        // $emit() 可将 调用当前方法的事件 外抛, 实现 自定义事件.
                        this.$emit('increment');
                    }
                },
            })
            new Vue({
                el: '#counter-event-example',
                data: {
                    total: 0
                },
                methods: {
                    incrementTotal: function () {
                        this.total += 1
                    }
                }
            })
        </script>
    </body>
    
    </html>
  • 相关阅读:
    logstash performance testing
    Elasticsearch ML
    jconsole远程监控logstash agent
    kafka总结
    cloudera learning8:MapReduce and Spark
    cloudera learning7:Hadoop资源管理
    cloudera learning6:Hadoop Security
    cloudera learning5:Hadoop集群高级配置
    查看硬件设备指令
    内存问题
  • 原文地址:https://www.cnblogs.com/aisowe/p/11437027.html
Copyright © 2011-2022 走看看