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 }
原文地址：https://www.cnblogs.com/moon-yyl/p/11620851.html
时间： 2024-10-02 23:20:24