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

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

父组件访问子组件对象，需要用到关键字 $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（）则可以指定特定的子组件。

posted @ 2021-07-05 00:50  kaer_invoker  阅读(223)  评论(0)  编辑  收藏  举报