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>
  • 相关阅读:
    CSV 文件的读写(函数)
    携带cookies请求github个人信息(类封装)
    网络和http协议理论
    思卡乐科技发布SR3系列RFID产品
    爱立信开始大规模mesh网络测试
    NB-IoT物联网,来了
    想象力是我们的局限,蓝牙5应用初探
    RFID电动车管理,智慧城市物联网建设的入口
    蓝牙模块选择经验谈
    RFID电动自行车与共享单车之物联网比较
  • 原文地址:https://www.cnblogs.com/aisowe/p/11437027.html
Copyright © 2011-2022 走看看