VUE ---- 在子组件中使用 data 的问题

最新推荐文章于 2023-02-02 10:08:49 发布

chituo2005

最新推荐文章于 2023-02-02 10:08:49 发布

阅读量832

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3520255/blog/3025330

版权

我们在子组件中定义 data 的时候， data 必须是一个函数而不是一个对象，这么设计的意义在于一个子组件并不像根组件一样被调用一次，还有一个就是子组件需要 data 作为函数，并返回一个独立的对象，作为独立的数据存储，不会出现多个组件之间相互影响的情况。

// Error: The "data" option should be a function that returns a per-instance value in component definitions.
        /*
        data: {
                content: 'this is a row'
            },
        */
下面是正确的形式：

 Vue.component('row', {
            data: function() {
                return {
                    content: 'this is a content'
                }
            },
            template: '<tr><td>{{content}}</td></tr>'
        })

转载于:https://my.oschina.net/u/3520255/blog/3025330