标签：ali border red height each 直接 change nbsp idt
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）
标签：ali border red height each 直接 change nbsp idt
原文地址：https://www.cnblogs.com/moon-yyl/p/11620851.html
