vue中data必須是函式
阿新 • • 發佈:2018-12-31
看了好多部落格論壇啥的,我比較笨不是很理解,包括我之前轉載的一篇,不過我轉載的我是看懂了,今天沒事重新過了下官網,下面我們一起看看官網是如何給出解答的,這裡面第一個他也用了return,但是和我們說的return不同,這個完全是為了躲避語法報錯,我們也可以自己建立vue例項註冊元件,然後多個地方同時註冊,解釋的還是很好的,我這裡拋磚引玉下~~~
通過 Vue 構造器傳入的各種選項大多數都可以在元件裡用。data
是一個例外,它必須是函式。實際上,如果你這麼做:
Vue.component('my-component', { template: '<span>{{ message }}</span>' |
那麼 Vue 會停止,並在控制檯發出警告,告訴你在元件中 data
必須是一個函式。理解這種規則的存在意義很有幫助,讓我們假設用如下方式來繞開 Vue 的警告:
<div id="example-2"> <simple-counter></simple-counter> <simple-counter></simple-counter> <simple-counter></simple-counter></div> |
var |
由於這三個元件共享了同一個 data
,因此增加一個 counter 會影響所有元件!這不對。我們可以通過為每個元件返回全新的 data 物件來解決這個問題:
data: function () { return { counter: 0 }} |
現在每個 counter 都有它自己內部的狀態了: