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>

 

 

posted @ 2021-07-05 01:26  kaer_invoker  阅读(203)  评论(0)    收藏  举报