Vuejs学习笔记(二)-6.数据的访问规则，上下级访问（父子访问）
作者：互联网
前面阐述了平级访问，即父组件的view层访问父组件的data层，直接通过插值显示即可简单访问。但是实际开发的场景如下：
1.结构：开发场景中一个主页面是一个父组件，内部很很多子组件，子组件内部又有子组件
2.网络请求：一个页面的数据一般是由父组件请求网络数据后，再向下传递给子组件
3.父子组件之间的通信：父组件会将网络请求的数据返给需要的子组件
4.子组件的内容变更后，需要层层向上给父组件，再由父组件传递给服务器
所以需要知道父子组件之间的访问方式。
访问方式一：父组件访问子组件。
父组件通过子组件自身定义的属性列表(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']
界面显示效果如下：
标签：Vuejs,访问,props,组件,message,上下级,cmessage,cmovies 来源： https://www.cnblogs.com/invoker2021/p/14967327.html