1. 程式人生 > >vue中data必須是函式

vue中data必須是函式

看了好多部落格論壇啥的,我比較笨不是很理解,包括我之前轉載的一篇,不過我轉載的我是看懂了,今天沒事重新過了下官網,下面我們一起看看官網是如何給出解答的,這裡面第一個他也用了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 的確是一個函數了,因此 Vue 不會警告,  // 但是我們返回給每個元件的例項卻引用了同一個 data 物件  data: function () { return data }})new Vue({ el: '#example-2'})
  

由於這三個元件共享了同一個 data,因此增加一個 counter 會影響所有元件!這不對。我們可以通過為每個元件返回全新的 data 物件來解決這個問題:

data: function () { return { counter: 0 }}

現在每個 counter 都有它自己內部的狀態了: