Vuejs学习笔记(二)-10.父组件访问子组件的对象，属性，方法

2021-07-05 01:01:05 阅读：251 来源： 互联网

标签：10 console cpn Vuejs refs showCmessage 组件 children

背景:之前讲的父子组件之间的通信都是指传值，数据的传递。还有另一种方式叫做调用，即父组件直接调用子组件的对象，属性和方式，也是可以的。具体应用场景后面写项目时再来补充。

父组件访问子组件对象，需要用到关键字 $children 和 $refs

一、$children（开发中使用的较少）

需求：在父组件中使用按钮点击，调用子组件的信息在console中打印

代码如下：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 14-父组件直接访问子组件的对象方法属性.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/5 0:28
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>14-父组件直接访问子组件的对象方法属性</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>父组件的Message:{{message}}</h2>
20   <p>-----------------父子组件分割线-------------------------</p>
21   <cpn></cpn>
22   <cpn></cpn>
23   <cpn></cpn>
24   <button @click="useChild">调用子组件</button>
25 </div>
26 <template id="cpn">
27   <div>
28 
29   </div>
30 </template>
31 <script src="../js/vue.js"></script>
32 <script>
33   const cpn = {
34     template:'#cpn',
35     data(){
36       return {
37         cnum1:1
38       }
39     },
40     methods:{
41       showCmessage(){
42         console.log('cmessage');
43       }
44     }
45   }
46 
47   const app = new Vue({
48     el:'#app',
49     data:{
50       message:'父组件的message'
51     },
52     components:{
53       cpn
54     },
55     methods:{
56       useChild(){
57         this.$children[0].showCmessage()
58         console.log(this.$children[0].cnum1);
59       }
60     }
61   })
62 </script>
63 </body>
64 </html>

代码解析：

1.子组件cpn内有数据cnum1,有方法showCmessage

2.父组件想通过点击按钮使用以上的数据和方法。

3.在按钮中定义监听事件，并调用useChild的方法。

4.使用 this.$children[index]获得子组件的对象，从而使用到子组件中的方法和属性。

但是这么玩有个弊端，就是父组件引用多个子组件，那么在代码中就要使用下标来指定使用哪一个子组件，因此为了解决这个问题，引入了$refs方法。

二、$refs （实际项目中用的多）

代码如下：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 14-父组件直接访问子组件的对象方法属性.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/7/5 0:28
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>14-父组件直接访问子组件的对象方法属性</title>
16 </head>
17 <body>
18 <div id="app">
19   <h2>父组件的Message:{{message}}</h2>
20   <p>-----------------父子组件分割线-------------------------</p>
21   <cpn></cpn>
22   <cpn ref="haha"></cpn>
23   <cpn></cpn>
24   <button @click="useChild">调用子组件</button>
25 </div>
26 <template id="cpn">
27   <div>
28 
29   </div>
30 </template>
31 <script src="../js/vue.js"></script>
32 <script>
33   const cpn = {
34     template:'#cpn',
35     data(){
36       return {
37         cnum1:1
38       }
39     },
40     methods:{
41       showCmessage(){
42         console.log('cmessage');
43       }
44     }
45   }
46 
47   const app = new Vue({
48     el:'#app',
49     data:{
50       message:'父组件的message'
51     },
52     components:{
53       cpn
54     },
55     methods:{
56       useChild(){
57         // this.$children[0].showCmessage()
58         // console.log(this.$children[0].cnum1);
59         console.log(this.$refs.haha.cnum1);
60         this.$refs.haha.showCmessage()
61       }
62     }
63   })
64 </script>
65 </body>
66 </html>

代码解析：

1.在父组件Html中调用子组件时，给需要关注的子组件<cpn>加上refs属性,<cpn ref='haha'></cpn>

2.在父组件调用useChild方法时，使用$refs.haha.showCmessage（）则可以指定特定的子组件。

标签：10,console,cpn,Vuejs,refs,showCmessage,组件,children
来源： https://www.cnblogs.com/invoker2021/p/14970562.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vuejs学习笔记(二)-10.父组件访问子组件的对象，属性，方法