看了好多博客论坛啥的,我比较笨不是很理解,包括我之前转载的一篇,不过我转载的我是看懂了,今天没事重新过了下官网,下面我们一起看看官网是如何给出解答的,这里面第一个他也用了return,但是和我们说的return不同,这个完全是为了躲避语法报错,我们也可以自己创建vue实例注册组件,然后多个地方同时注册,解释的还是很好的,我这里抛砖引玉下~~~
通过 Vue 构造器传入的各种选项大多数都可以在组件里用。data
是一个例外,它必须是函数。实际上,如果你这么做:
Vue.component(
'my-component', {
template:
'<span>{{ message }}</span>',
data: {
message:
'hello'
}
})
|
那么 Vue 会停止,并在控制台发出警告,告诉你在组件中 data
必须是一个函数。理解这种规则的存在意义很有帮助,让我们假设用如下方式来绕开 Vue 的警告:
<div id="example-2">
<simple-counter>
</simple-counter>
<simple-counter>
</simple-counter>
<simple-counter>
</simple-counter>
</div>
|
var data = {
counter:
0 }
Vue.component(
'simple-counter', {
template:
'<button v-on:click="counter += 1">{{ counter }}</button>',
data:
function () {
return data
}
})
new Vue({
el:
'#example-2'
})
|
由于这三个组件共享了同一个 data
,因此增加一个 counter 会影响所有组件!这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题:
data:
function () {
return {
counter:
0
}
}
|
现在每个 counter 都有它自己内部的状态了: