组件通信

组件通信

父子组件通信

1. props 父向子传值

   //父组件
   <template>
     <div id="app">
      	<HelloWorld :msg="msg"/>
     </div>
   </template>
   <script>
   import child from './components/child.vue'
   export default {
     name: 'App',
     data() {
       return {
         msg: 123
       }
     },
     components: {
       child
     }
   }
   </script>

   //子组件
   <template>
     <div class="hello">
       <h1>{{ msg }}</h1>
     </div>
   </template>
   <script>
   export default {
     name: 'child',
     props: {
       msg: Number
     },
     data() {
         return {
             count: this.msg
         }
     }
   }
   </script>

   此时不建议，子组件修改这个值，因为父子组件中的数据流是单向的，如果想作为局部数据使用，应该重新储存

2. 通过$emit,$on 实现子组件向父组件通信

   父组件自定义事件 childFn

   子组件使用$emit触发父组件的自定义事件 childFn

   //父组件
   
   <template>
     <div id="app">
       <h1>{{msg}}</h1>
       <child @childFn="parentFn"/>
     </div>
   </template>
   
   <script>
   import child from './components/child.vue'
   
   export default {
     name: 'App',
     data() {
       return {
         msg: 123
       }
     },
     components: {
       child
     },
      methods: {
       parentFn(data) {
         this.msg = data;
       }
     }
   }
   </script>

   //子组件
   <template>
     <div class="hello">
       <h1>{{ msg }}</h1>
       <button @click="add">点击</button>
     </div>
   </template>
   
   <script>
   export default {
     name: 'child',
     props: {
       msg: Number
     },
     methods: {
       add() {
         this.$emit('childFn', 789)
       }
     }
   }
   </script>

3. $ref实现父组件向子组件传值

   //父组件
   <template>
     <div id="app">
       <h1>{{msg}}</h1>
       <child ref="mychild" @childFn="parentFn"/>
       <button @click="getData">父组件</button>
     </div>
   </template>
   
   <script>
   import child from './components/child.vue'
   
   export default {
     name: 'App',
     data() {
       return {
         msg: 123
       }
     },
     components: {
       child,
       child2
     },
     methods: {
       parentFn(data) {
         this.msg = data;
       },
       getData() {
         this.$refs.mychild.count++
       }
     }
   }
   </script>

   //子组件
   <template>
     <div class="hello">
       <h1>{{ msg }}</h1>
       <p>数字：{{count}}</p>
       <button @click="add">点击</button>
     </div>
   </template>
   <script>
   export default {
     name: 'child',
     props: {
       msg: Number
     },
     data() {
       return {
         count: 0
       }
     },
     methods: {
       add() {
         this.$emit('childFn', 789)
       }
     }
   }
   </script>

兄弟组件通信

1. 空vue实例作为中间人，实现兄弟组件通信

   //根目录创建bus.js
   import Vue from 'vue'
   export default new Vue()

   //兄弟1组件
   <template>
     <div class="hello">
       <button @click="add">点击</button>
     </div>
   </template>
   
   <script>
   import Bus from '../../bus.js'; 
   export default {
     name: 'child',
     methods: {
       add() {
         Bus.$emit('getTarget', '999');  
       }
     }
   }
   </script>

   //兄弟2组件
   <template>
     <div class="hello">
       <h1>{{ msg }}</h1>
     </div>
   </template>
   
   <script>
   import Bus from '../../bus.js';
   export default {
     name: 'child2',
     data() {
       return {
         msg: '1'
       }
     },
     created() {
       Bus.$on('getTarget', target => {  
         this.msg = target
       });
     },
     methods: {
       
     }
   }
   </script>

   vuex可以实现组件通信，此次暂不叙述

总结

1. 父子组件通信
   • 子组件通过props接受父组件的数据
   • 父组件在子组件上注册监听事件，子组件通过$emit触发此事件，向父组件传递数据
   • 通过ref属性给子组件设置名字，父组件通过$refs组件名来获得子组件
   • 子组件通过$parent获得父组件，给父组件传递数据
   • 父组件通过$children获得子组件，给子组件传递数据
2. 兄弟组件通信
   • eventBus的方法，他的本质通过空的vue实例来传递数据,$emit提交数据，$on监听获取数据，此方法可以用户任何组件通信