Vuejs学习笔记(二)-6.数据的访问规则，上下级访问（父访问子）

前面阐述了平级访问，即父组件的view层访问父组件的data层，直接通过插值显示即可简单访问。但是实际开发的场景如下：

1.结构：开发场景中一个主页面是一个父组件，内部很很多子组件，子组件内部又有子组件
2.网络请求：一个页面的数据一般是由父组件请求网络数据后，再向下传递给子组件
3.父子组件之间的通信：父组件会将网络请求的数据返给需要的子组件
4.子组件的内容变更后，需要层层向上给父组件，再由父组件传递给服务器


所以需要知道父子组件之间的访问方式。
访问方式一：父组件访问子组件。
1.1 props 数组写法
父组件通过子组件自身定义的属性列表(props)即父子组件的绑定关系,来进行父子组件的通信。（props是properties的缩写）
代码如下：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 09-父组件访问子组件.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/3 21:55
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>09-父组件访问子组件</title>
16 </head>
17 
18 <body>
19 <div id="app">
20   <h2>我是父组件的message:{{message}}</h2>
　　　<h2>下面是父组件的movies内容:</h2>
     <ul>
　　　　<li v-for='m in movies'>{{m}}</li>
　　　</ul>
21   <h2>---------------父组件分割线----------------------</h2>
22   <cpn :cmessage="message" :cmovies="movies"></cpn>
23 </div>
24 <template id="cpn1">
25   <div>
26     <h2>-------------------子组件分割线-----------------------</h2>
27     <p>我是子组件的message:{{cmessage}}</p>
       <p>下面是子组件的cmovies值</p>
28     <ul>
29       <li v-for="m in cmovies ">{{m}}</li>
30     </ul>
31     <h2>-------------------子组件分割线-----------------------</h2>
32 
33   </div>
34 </template>
35 <script src="../js/vue.js"></script>
36 <script>
37   const cpn = {
38     template:'#cpn1',
39     props: ['cmessage','cmovies']
40   }
41 
42   //root组件（相当也父组件）
43   const app = new Vue({
44     el:'#app',
45     data:{
46       message:'我是父组件的message信息',
47       movies:['冰与火之歌','魔兽','绝命毒师','纸牌屋']
48     },
49     components:{
50       cpn
51     }
52   })
53 </script>
54 </body>
55 </html>

代码解释：

1.Vue实例是root组件，相当于父组件

2.cpn是root组件的子组件

3.父组件中有数据(data)：message和 movies

4.父组件html中显示父组件的 message 和 movies

5. 子组件中有接收父组件属性的变量:cmessage 和cmovies，其定义在props中

6. 父组件html中引用了子组件<cpn></cpn>，且在子组件中定义的父组件与子组件之间的绑定关系<cpn v-bind:cmessagej="message" :cmovies="movies"></cpn>

7.子组件html中插值显示了子组件的变量(属性)

8.此处props使用的属性定义方式1(简单)是数组形式，props:['cmessage','cmovies']

界面显示效果如下：

1.2.对象写法

数组写法只定义了要绑定的变量名称，而另一种写法对象写法可以更详尽的定义父传输给子的每个变量的各种约束，比如是传输String类型还是Array类型，如果Html父组件未给子组件传值，子组件的默认值是什么，是否是必填字段等。

代码如下：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 10-父组件访问子组件-方式2.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/4 10:28
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>10-父组件访问子组件-方式2</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>我是父组件的message内容:{{message}}</h2>
20   <h2>下面是父组件的songs内容:</h2>
21   <ul>
22     <li v-for="s in songs">{{s}}</li>
23   </ul>
24   <p>----------------父组件分割线------------------------</p>
25   <cpn :cmessage="message" :csongs="songs"></cpn>
26 </div>
27 <template id="cpn1">
28   <div>
29     <p>----------------子组件分割线-------------------------</p>
30     <h2>我是子组件的cmessage内容:{{cmessage}}</h2>
31     <p>以下是子组件csongs的内容:</p>
32     <ul>
33       <li v-for="s in csongs">{{s}}</li>
34     </ul>
35     <p>----------------子组件分割线-------------------------</p>
36 
37   </div>
38 </template>
39 <script src="../js/vue.js"></script>
40 <script>
41   const cpn = {
42     template:'#cpn1',
43     props:{
44       cmessage:{
45         type:String,
46         default:'我是默认message',
47         required:true
48       },
49       csongs:{
50         type:Array,
51         default(){
52           return['Monkey Dancing']
53         },
54         required:true
55       }
56     }
57   }
58 
59   const app= new Vue({
60     el:'#app',
61     data:{
62       message:'我是父组件的message',
63       songs:['man in the mirror','they','大风吹','ABC']
64     },
65     components:{
66       cpn
67     }
68   })
69 </script>
70 </body>
71 </html>

代码详解：

重点阐述props的对象写法。

1.定义了props为对象

2.内部有cmessage属性和csongs属性。

3.cmessage属性内部存放的是对象，csongs内部存放的也是对象

4.cmessage对象定义了type属性，存放该变量的类型为String,default值是后面的字符串，required表示这个是父组件必须穿的值，如果不穿页面报错。，

5.csongs对象定义了type属性，存放该变量的类型为Array,default值使用的函数，required表示这个是父组件必须传的值，如果不传页面报错。，

页面效果同之前的数组写法：

posted @ 2021-07-04 10:27 kaer_invoker 阅读(156) 评论(0) 收藏举报

刷新页面返回顶部

知行合一

Vuejs学习笔记(二)-6.数据的访问规则，上下级访问（父访问子）