补全常见组件通信手段

Author: yt0379

src/components/communication/Child1.vue

@@ -14,7 +14,14 @@
       },
     },
     mounted () {
-      this.$bus.$on('event-from-child2', msg => {
+      // 总线方式通信
+      // this.$bus.$on('event-from-child2', msg => {
+      //   console.log('Child1:', msg);
+      // });
+
+      // 利用共同祖辈方式通信
+      // 兄弟组件可以使用$parent, 没有直接关系使用$root
+      this.$parent.$on('event-from-child2', msg => {
         console.log('Child1:', msg);
       });
     },

src/components/communication/Child2.vue

@@ -10,7 +10,9 @@
     methods: {
       sendToChild1() {
         // 利用事件总线发送事件
-        this.$bus.$emit('event-from-child2', 'some msg from child2')
+        // this.$bus.$emit('event-from-child2', 'some msg from child2')
+        // 利用共同祖辈元素发送事件
+        this.$parent.$emit('event-from-child2', 'some msg from child2')
       }
     },
   }

src/components/communication/index.vue

@@ -4,7 +4,7 @@
     <!-- props, 自定义事件 -->
     <Child1 msg="some msg from parent" @some-event="onSomeEvent"></Child1>
     <!-- 事件总线 -->
-    <Child2></Child2>
+    <Child2 ref="child2"></Child2>
   </div>
 </template>
 
@@ -21,6 +21,13 @@
         console.log('Communition:', msg);
       }
     },
+    mounted () {
+      // $children获取子组件数组，不包括普通元素，不保证模板中顺序
+      console.log(this.$children);
+      // $refs用于引用命名的元素或组件，可包含普通元素
+      console.log(this.$refs.child2);
+      
+    },
   }
 </script>