一、同级访问
父组件的components下即可以存放子组件的template，有可以存放子组件的数据和方法。子组件的结构和Vue实例结构是相似的。
另外，子组件的view层可以直接方位子组件的data，父组件的view层可以直接访问父组件的data
来个例子，同级访问：
1 <!--
2 @author:invoker
3 @project:project_lianxi
4 @file: 08-子组件view访问子组件的data.html
5 @contact:invoker2021@126.com
6 @descript:
7 @Date:2021/7/3 18:02
8 @version: html5
9 -->
10
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14 <meta charset="UTF-8">
15 <title>08-view层访问data-平级访问</title>
16 </head>
17 <body>
18 <div id="app">
19 <!-- message存放在Vue实例内，因此只能被Vue实例对应的元素DIV以及其子元素访问-->
20 <h2>Vue实例的view层访问Vue实例的data:{{message}}</h2>
21 <cpn></cpn>
22 </div>
23 <template id="cpnTemp">
24 <div>
25 <h2>子组件访问子组件的data</h2>
26 <!-- counter是子组件的data,因此子组件的View层可以访问该data-->
27 <h2>计数器:{{counter}}</h2>
28 <button @click="increment">+</button>
29 <button @click="decrement">-</button>
30 </div>
31 </template>
32 <script src='../js/vue.js'></script>
33 <script>
34 const app = new Vue({
35 el: '#app',
36 data: {
37 message: '父组件的data'
38 },
39 components: {
40 'cpn': {
41 template: '#cpnTemp',
42 // 子组件的变量counter存放在data()函数内
43 data() {
44 return {
45 counter: 0
46 }
47 },
48 methods: {
49 increment() {
50 this.counter++
51 },
52 decrement() {
53 this.counter--
54 }
55 }
56 }
57 }
58 })
59 </script>
60 </body>
61 </html>
二、为什么子组件的数据是存放在data()函数内
因为函数有作用域，这样多个子组件同时出现时，各组件的值是存放在各自函数中，可以保证各组件的独立性。
以下例子，就是一个计算组件，在页面上有3个相同组件，但是各组件的计算是独立的。
1 <!--
2 @author:invoker
3 @project:project_lianxi
4 @file: 07-组件内部的数据为什么存储在data()函数中.html
5 @contact:invoker2021@126.com
6 @descript:
7 @Date:2021/7/3 17:48
8 @version: html5
9 -->
10
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14 <meta charset="UTF-8">
15 <title>07-组件内部的数据为什么存储在data()函数中</title>
16 </head>
17 <body>
18 <div id="app">
19 <cpn></cpn>
20 <cpn></cpn>
21 <cpn></cpn>
22 <cpn></cpn>
23 </div>
24 <template id="cpn1">
25 <div>
26 <h2>计数器为{{counter}}</h2>
27 <button @click="increment">+</button>
28 <button @click="decrement">-</button>
29 </div>
30 </template>
31 <script src="../js/vue.js"></script>
32 <script>
33 const app = new Vue({
34 el: '#app',
35 data: {
36 message: '07-组件内部的数据为什么存储在data()函数中'
37 },
38 components: {
39 'cpn': {
40 template: '#cpn1',
41 // data必须用函数的方式存储组件的数据，因为当有多个组件时，函数具有作用域，因此每个组件各自内部的数据单独存放
42 data() {
43 return {
44 counter:0
45 }
46 },
47 // 使用非函数的方法存放数据,会报错
48 // data:{
49 // counter:0
50 // },
51 methods:{
52 increment(){
53 this.counter++
54 },
55 decrement(){
56 this.counter--
57 }
58 }
59 }
60 }
61 })
62 </script>
63 </body>
64 </html>