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

最新推荐文章于 2022-11-01 17:31:41 发布

chituo2005

最新推荐文章于 2022-11-01 17:31:41 发布

阅读量856

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

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

博客指出在子组件中定义 data 时，data 必须是函数而非对象。原因一是子组件不像根组件只被调用一次，二是子组件需 data 作为函数返回独立对象，用于独立存储数据，避免多个组件相互影响。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我们在子组件中定义 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