Vue组件中的data

发表于 | 分类于

学习内容

data必须是函数。通过 Vue 构造器传入的各种选项大多数都可以在组件里用。data 是一个例外，它必须是函数。

实例

如下一个组件：

1
2
3
4
5
6
Vue.component('my-component', {
       template: '<span>{{ message }}</span>',
       data: {
           message: 'hello'
       }
   })

在浏览器运行会报错，提示The "data" option should be a function that returns a per-instance value in component definitions.即说明data必须是函数，所以改造一下变为：

1
2
3
4
5
6
7
8
9
10
var data={
       message: 'hello'
   };
   
   Vue.component('my-component', {
       template: '<span>{{ message }}</span>',
       data: function(){
           return data;
       }
   })

此时，就可以正常渲染了。但上面代码中还有一个问题，如果改变message，将影响所有组件，这不对，我们通过为每个组件返回全新的data对象来解决这个问题：

1
2
3
4
5
data: function(){
           return {
               message: 'hello'
           }
       }