組件可以有自己的data，并且data必須是一個function。
在下面這個例子中，data 返回了一個在外部定義的對象。并且這個組件在頁面中使用了3次，點擊+1時出現了如下情況：data中的count屬性影響到了所有實例。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="../css/bootstrap.css" rel="external nofollow" > <style type="text/css"> #app{ margin:20px; } </style> </head><body> <div id='app'> <counter></counter> <counter></counter> <counter></counter> </div> <template id="tmp1"> <div> <input type="button" value="+1" @click="increment"> <h1>{{count}}</h1> </div> </template></body><script src="../lib/vue.js"></script><script> var dataObj = {count:0} //這是一個計數器組件,每當點擊按鈕,讓data中的count值加1 Vue.component('counter',{ template:'#tmp1', data:function(){ return dataObj }, methods:{ increment(){ this.count++ } } }) var vm = new Vue({ el:'#app', })</script></html>而當data選項是一個函數的時候，每個實例可以維護一份被返回對象的獨立的拷貝，這樣各個實例中的data不會相互影響，是獨立的。
Vue.component('counter',{ template:'#tmp1', data:function(){ return {count:0} }, methods:{ increment(){ this.count++ } } })
補充：下面看下vue組件中data必須是一個函數的原因
vue組件中data值不能為對象，因為對象是引用類型，組件可能會被多個實例同時引用。如果data值為對象，將導致多個實例共享一個對象，其中一個組件改變data屬性值，其它實例也會受到影響。
上面解釋了data不能為對象的原因，這里我們簡單說下data為函數的原因。data為函數，通過return 返回對象的拷貝，致使每個實例都有自己獨立的對象，實例之間可以互不影響的改變data屬性值。
data為函數的示例：
data:function(){ return { k1: 'v1', k2: 'v2', ... }}總結
以上所述是小編給大家介紹的Vue組件中的data必須是一個function的原因淺析，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
