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（）则可以指定特定的子组件。
标签：10,console,cpn,Vuejs,refs,showCmessage,组件,children 来源： https://www.cnblogs.com/invoker2021/p/14970562.html