组件通信基础代码准备

package.json

@@ -29,7 +29,10 @@
       "plugin:vue/essential",
       "eslint:recommended"
     ],
-    "rules": {},
+    "rules": {
+      "vue/no-unused-components":"off",
+      "no-console":"off"
+    },
     "parserOptions": {
       "parser": "babel-eslint"
     }

src/App.vue

@@ -1,17 +1,20 @@
 <template>
   <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
+    <img src="./assets/logo.png">
     <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <!-- <communication></communication> -->
   </div>
 </template>
 
 <script>
 import HelloWorld from './components/HelloWorld.vue'
+import communication from '@/components/communication';
 
 export default {
   name: 'app',
   components: {
-    HelloWorld
+    HelloWorld,
+    communication
   }
 }
 </script>

src/components/communication/Child1.vue

@@ -0,0 +1,26 @@
+<template>
+  <div @click="$emit('some-event', 'msg from child1')">
+    <h3>child1</h3>
+    <p>{{msg}}</p>
+  </div>
+</template>
+
+<script>
+  export default {
+    props: {
+      msg: {
+        type: String,
+        default: ''
+      },
+    },
+    mounted () {
+      this.$bus.$on('event-from-child2', msg => {
+        console.log('Child1:', msg);
+      });
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/communication/Child2.vue

@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h3>child2</h3>
+    <button @click="sendToChild1">给child1发送消息</button>
+  </div>
+</template>
+
+<script>
+  export default {
+    methods: {
+      sendToChild1() {
+        // 利用事件总线发送事件
+        this.$bus.$emit('event-from-child2', 'some msg from child2')
+      }
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/communication/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div>
+    <h2>组件通信</h2>
+    <!-- props, 自定义事件 -->
+    <Child1 msg="some msg from parent" @some-event="onSomeEvent"></Child1>
+    <!-- 事件总线 -->
+    <Child2></Child2>
+  </div>
+</template>
+
+<script>
+  import Child1 from '@/components/communication/Child1.vue'
+  import Child2 from '@/components/communication/Child2.vue'
+  
+  export default {
+    components: {
+      Child1, Child2
+    },
+    methods: {
+      onSomeEvent(msg) {
+        console.log('Communition:', msg);
+      }
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import App from './App.vue'
 
 Vue.config.productionTip = false
+// 事件总线
+Vue.prototype.$bus = new Vue()
 
 new Vue({
   render: h => h(App),