首先, 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>

 

发布评论

分享到:

IT源码网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!

怎样在 Vue 的 component 组件中使用 props 讲解
你是第一个吃螃蟹的人
发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。