vue基础----组件通信（$parent,$children）
Posted moon-yyl
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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）的主要内容，如果未能解决你的问题，请参考以下文章
vue 组件通信方式 ，父子、隔代、兄弟 三类通信，六种方法