data一定是函数
- <strong>data必须是函数</strong>
- 使用组件时，大多数可以传入到 Vue 构造器中的选项都可以在 Vue.extend() 或Vue.component()中注册组件时使用，但组件中data是个例外, <strong>data 必须是函数</strong>。
1.验证data必须是函数
- 下面代码会出现的问题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<template id="myTemplate">
<div>{{message}}</div>
</template>
<script src="js/vue.js"></script>
<script>
Vue.component('my-component', {
template: '#myTemplate',
data:{
message:'你好,中国!'
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
-
代码运行结果：
vueb1.png
- 正确的写法：
Vue.component('my-component', {
template: '#myTemplate',
data: function () {
return {
message: '你好,中国'
}
}
})
2.data必须在函数中返回
- 注意：如果data选项指向某个对象，这意味着所有的组件实例共用一个data。
我们应当使用一个函数作为 data 选项，让这个函数返回一个新对象。
-
注意: 在外面定义对象, 然后在data()中返回这个对象, 那么所有组件用的对象都是同一个对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter> </div> <template id="myComponent"> <button @click="counter += 1"> {{counter}} </button> </template> <script src="js/vue.js"></script> <script> var data = { counter: 0 } Vue.component('simple-counter', { template: '#myComponent', /* data 是一个函数，因此 Vue 不会警告， 但是我们为每一个组件返回了同一个对象引用 */ data: function () { return data } }) new Vue({ el: "#app" }) </script> </body> </html>- 运行结果，这三个组件共享了同一个 data ， 因此增加一个 counter 会影响所有组件！
vueb2.png
- 解决办法：为每个组件返回新的 data 对象来解决这个问题！
```
data: function () {
return {
counter: 0
}
}
```
vueb3.png
网友评论