組件可以訪問Vue實例數(shù)據(jù)嗎?
答案是： 不行！，我們都說組件的復用了，所以呢 組件訪問不了VUE實例中的data 數(shù)據(jù)，如果訪問會報錯 我試過了：
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實例中嗎？
我們發(fā)現(xiàn)不能訪問，而且即使可以訪問，如果 將所有的數(shù)據(jù)都放在Vue實例中，Vue實例就會 變的非常臃腫。
結(jié)論：Vue組件應該有自己保存數(shù)據(jù)的地方。
?
這里說我a沒定義，那么怎么樣去訪問呢：
組件對象也有一個data屬性(也可以有methods等屬性，下面我們有用到)
只是這個data屬性必須是一個函數(shù)
而且這個函數(shù)返回一個對象，對象內(nèi)部保存著數(shù)據(jù)
為什么data必須是一個函數(shù)呢？ 因為組件的復用性，組件必須要有獨立的數(shù)據(jù) ，換句話說 每個組件都要是獨立的，如果都共享一個數(shù)據(jù)，那么一改全改那就很不安全什么的，，，，，
代碼：
<template?id="bihu">
??????<div>
<!--????這里訪問后臺data?的?a?和?b????-->
????????<h2>{{a}}</h2>
????????<p>{}</p>
??????</div>
??</template>
??<div?id="app">
??<cpn></cpn>
??</div>
??<script?src="vue.js"></script>
??<script>
????//注冊一個全局組件
????Vue.component('cpn',{
??????template:"#bihu",
??????data(){
????????return?{a:"我是a",b:"我是b"}
??????}
????})
????const?app?=?new?Vue({
????el:"#app"
????})
??</script>
看見沒 ，組件也有data屬性，但是他一定要是個函數(shù)(上面是ES6寫法)，返回的是對象，里面保存著數(shù)據(jù)。
其實不止data屬性 還有methods屬性，里面可以定義方法， 【我們學習要溫故而知新】
?
下面寫個例子： 組件開發(fā)計數(shù)器：
<template?id="calc">
??????<div>
????????<h2>計數(shù)器</h2>
????????<p>當前數(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>
所以你可以嘗試 多用幾個calc標簽 就有多個計數(shù)器 但是里面的數(shù)據(jù)都是獨立的? ，每個人的數(shù)字通過點擊都不一樣
作者：??咸瑜???
APP 