背景:之前讲的父子组件之间的通信都是指传值,数据的传递。还有另一种方式叫做调用,即父组件直接调用子组件的对象,属性和方式,也是可以的。具体应用场景后面写项目时再来补充。
父组件访问子组件对象,需要用到关键字 $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()则可以指定特定的子组件。