vue基礎----組件通訊（$parent,$children）

時間 2019-11-08

標籤 vue 基礎組件通訊 parent children 简体版

原文原文鏈接

1.按照dom的父子級關係，在子組件中能夠經過$parent 直接調用父組件的方法，也可獲得父組件的屬性。vue

2.在父組件中經過$childrens能夠獲得一個子組件數組,可以在父組件中調用子組件的方法和獲得屬性。node

3.特別注意一下_uid標識每個組件。數組

下面是一個下拉菜單舉例app

 1 <body>
 2     <div id="app">
 3         <collapse>
 4             <collapse-item title="大學同窗">大學同窗A</collapse-item>
 5             <collapse-item title="高中同窗">高中同窗A</collapse-item>
 6             <collapse-item title="初中同窗">初中同窗A</collapse-item>
 7         </collapse>
 8     </div>
 9     <script src="./node_modules/vue/dist/vue.js"></script>
10     <script>
11         /* 組件通訊 $parent 和$children的用法 _uid的用法*/
12         Vue.component("collapse",{
13             template:`
14                 <div class="box">
15                     <slot></slot> 
16                 </div>
17             `,
18             data(){
19                 return {
20                     "yilia":1244
21                 }
22             },
23             methods:{
24                 changeCusionState(childId){
25                     /*element 是子組件能夠直接調用 子組件的方法和屬性*/
26                     this.$children.forEach(element => {
27                         if(element._uid !== childId){
28                             element.show = false;
29                         }
30                     });
31                 }
32             }
33         });
34 
35         Vue.component("collapse-item",{
36             props:['title'],
37             template:`
38                 <div>
39                     <div class="title" @click="handleClick">{{title}}</div>
40                     <div v-show="show">
41                         <slot></slot> 
42                     </div>
43                     
44                 </div>
45             `,
46             data(){
47                 return {
48                     show:false
49                 }
50             },
51             methods:{
52                 handleClick(){
53                     this.show = !this.show;
54                     /*用 $parent直接調用父組件的方法*/
55                     console.log(this.$parent.yilia);
56                     this.$parent.changeCusionState(this._uid);
57                 },
58                 vueTest(){
59                     console.log("I am called!");
60                 }
61             }
62         });
63 
64         let vm = new Vue({
65             el:"#app",
66             data:{
67                 msg:"hello vue"
68             }
69         });
70     </script>
72 </body>

1  .title {
2             width:120px;
3             height:30px;
4             text-align: center;
5             border:1px solid red;
6             margin-top:4px;
7         }

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。