Vuejs学习笔记(二)-11.子组件访问父组件的对象
子组件访问父组件的对象,使用场景,较少,因为子组件访问父组件,会存在耦合度较高,不建议这么做。这里只做了解。
1 <!-- 2 @author:invoker 3 @project:project 4 @file: 18 组件通信 子访问父 parent root.html 5 @contact:invoker2021@126.com 6 @descript: 7 @Date:2021/7/05 01:23 8 @version: html5 9 --> 10 11 <!DOCTYPE html> 12 <html lang="en"> 13 <head> 14 <meta charset="UTF-8"> 15 <title>18 组件通信 子访问父 parent root</title> 16 </head> 17 <body> 18 <div id="app"> 19 <cpn1></cpn1> 20 </div> 21 <template id="cpn1"> 22 <div> 23 <p>我是一个子组件</p> 24 <button @click="btnClick">访问父组件的按钮</button> 25 <cpn2></cpn2> 26 </div> 27 </template> 28 29 <template id="cpn2"> 30 <div> 31 <p>我是一个孙子组件</p> 32 <button @click="btnClick">访问父组件的按钮</button> 33 </div> 34 </template> 35 <script src="../js/vue.js"></script> 36 <script> 37 const cpn2 = { 38 template:'#cpn2', 39 methods:{ 40 btnClick(){ 41 // 访问父组件实际开发过程中用的少 42 console.log(this.$parent.message); 43 // 访问根的vue,使用也少 44 console.log(this.$root); 45 } 46 } 47 } 48 49 const cpn1 = { 50 template: '#cpn1', 51 data(){ 52 return { 53 message:'cpn1的message' 54 } 55 }, 56 methods: { 57 btnClick() { 58 console.log(this.$parent); 59 } 60 }, 61 components:{ 62 cpn2 63 } 64 } 65 66 const app = new Vue({ 67 el: '#app', 68 data: { 69 message: 'hello' 70 }, 71 components: { 72 cpn1 73 } 74 }) 75 </script> 76 </body> 77 </html>
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14970587.html