vue基础----组件通信（$parent,$children）

1.按照dom的父子级关系，在子组件中可以通过$parent 直接调用父组件的方法，也可得到父组件的属性。

2.在父组件中通过$childrens可以得到一个子组件数组,能够在父组件中调用子组件的方法和得到属性。

3.特别注意一下_uid标识每一个组件。

下面是一个下拉菜单举例

 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         }

vue基础----组件通信（$parent,$children）

猜你喜欢