組件可以訪問(wèn)Vue實(shí)例數(shù)據(jù)嗎?
答案是： 不行！，我們都說(shuō)組件的復(fù)用了，所以呢 組件訪問(wèn)不了VUE實(shí)例中的data 數(shù)據(jù)，如果訪問(wèn)會(huì)報(bào)錯(cuò) 我試過(guò)了：
vue.js:635?[Vue?warn]:?Property?or?method?"a"?is?not?defined?on?the?instance?but?referenced?during?render.?Make?sure?that?this?property?is?reactive,?either?in?the?data?option,?or?for?class-based?components,?by?initializing?the?property.?See:?https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found?in
--->?<MCpn>
???????<Root>
?
組件中的數(shù)據(jù)是保存在哪里呢？頂層的Vue實(shí)例中嗎？
我們發(fā)現(xiàn)不能訪問(wèn)，而且即使可以訪問(wèn)，如果 將所有的數(shù)據(jù)都放在Vue實(shí)例中，Vue實(shí)例就會(huì) 變的非常臃腫。
結(jié)論：Vue組件應(yīng)該有自己保存數(shù)據(jù)的地方。
?
這里說(shuō)我a沒(méi)定義，那么怎么樣去訪問(wèn)呢：
組件對(duì)象也有一個(gè)data屬性(也可以有methods等屬性，下面我們有用到)
只是這個(gè)data屬性必須是一個(gè)函數(shù)
而且這個(gè)函數(shù)返回一個(gè)對(duì)象，對(duì)象內(nèi)部保存著數(shù)據(jù)
為什么data必須是一個(gè)函數(shù)呢？ 因?yàn)榻M件的復(fù)用性，組件必須要有獨(dú)立的數(shù)據(jù) ，換句話說(shuō) 每個(gè)組件都要是獨(dú)立的，如果都共享一個(gè)數(shù)據(jù)，那么一改全改那就很不安全什么的，，，，，
代碼：
<template?id="bihu">
??????<div>
<!--????這里訪問(wèn)后臺(tái)data?的?a?和?b????-->
????????<h2>{{a}}</h2>
????????<p>{}</p>
??????</div>
??</template>
??<div?id="app">
??<cpn></cpn>
??</div>
??<script?src="vue.js"></script>
??<script>
????//注冊(cè)一個(gè)全局組件
????Vue.component('cpn',{
??????template:"#bihu",
??????data(){
????????return?{a:"我是a",b:"我是b"}
??????}
????})
????const?app?=?new?Vue({
????el:"#app"
????})
??</script>
看見(jiàn)沒(méi) ，組件也有data屬性，但是他一定要是個(gè)函數(shù)(上面是ES6寫(xiě)法)，返回的是對(duì)象，里面保存著數(shù)據(jù)。
其實(shí)不止data屬性 還有methods屬性，里面可以定義方法， 【我們學(xué)習(xí)要溫故而知新】
?
下面寫(xiě)個(gè)例子： 組件開(kāi)發(fā)計(jì)數(shù)器：
<template?id="calc">
??????<div>
????????<h2>計(jì)數(shù)器</h2>
????????<p>當(dāng)前數(shù)：{{count}}</p>
????????<input?type="button"?value="+"?@click="add">
????????
????????<input?type="button"?value="-"?@click="sub">
??????</div>
??</template>
??<div?id="app">
??<calc></calc>
??</div>
??<script?src="vue.js"></script>
??<script>
????const?app?=?new?Vue({
??????el:"#app",
??????components:{
????????'calc':{
??????????template:"#calc",
??????????data(){
????????????return?{
??????????????count:0
????????????}
??????????},
??????????methods:{
????????????add(){
??????????????this.count++;
????????????},
????????????sub(){
??????????????this.count--;
????????????}
??????????}
????????}
??????}
????})
??</script>
所以你可以嘗試 多用幾個(gè)calc標(biāo)簽 就有多個(gè)計(jì)數(shù)器 但是里面的數(shù)據(jù)都是獨(dú)立的? ，每個(gè)人的數(shù)字通過(guò)點(diǎn)擊都不一樣
作者：??咸瑜???
APP 