父子组件通信
简单来说就是利用回调函数获取value
- 直接传递属性
<Child :getChildValue="getChildValue" /> // 传递的是一个函数 Child组件里面可以使用 this.$attrs.getChildValue() 来调用
- 通过@方式传递
<Child @getChildValue="getChildValue" /> Child组件调用 this.$emit('getChildValue', value);
- 利用
$parent和$children相互通信 （官网不太支持你们这样搞，小心点）
this.$parent 获取父组件实例 可以使用父组件实例的属性
this.$children 获取子组件数组 可以利用下标调用子组件实例的属性
爷孙组件通信
- 爷孙组件之间是不能直接通信的，但可以构造成两个父子组件，通过父组件来传递数据
虽然不能通信，但是传递数据还是ok的
- provide + inject
这种数据传递并不是响应式的
provide: { data: '父组件提供的数据' }, // 在包裹的任何子组件中 都可以使用inject获取数据 Child组件 inject: ['data']
兄弟组件通信
场景:
<Child /> <Child1 />
- 简单粗暴的办法
Child组件先传递给父组件,然后再由父组件传入Child1这个组件，具体不多赘述 - Vuex这个后面会写文章，现在也不多说，但是是个解决方案
- Event Bus数据总线 创建公共类
主要就是利用一个公共的vue类 进行事件的分发，然后再利用这个类接收。
示例:
- 创建
bus.js
/** * Created By 憧憬 */ import Vue from 'vue'; export default new Vue;
- Child组件
<template> <div class="Child"> <button @click="sendValue">传递给父组件</button> </div> </template> <script> import bus from '../../bus'; export default { data(){ return { value: 'child - value' }; }, methods: { sendValue() { bus.$emit('sendChildValue', this.value); } } }; </script>
- Child1组件
<template> <div class="Child1"> <div> child1 </div> </div> </template> <script> import bus from '../../bus'; export default { props: {}, mounted() { this.getValue(); // 在挂载阶段调用 函数 进行监听 }, beforeDestroy() { // 卸载取消 // 取消监听 bus.$off('sendChildValue'); }, methods: { getValue() { // 对应分发的键 接收到分发的数据 bus.$on('sendChildValue', value => { console.log(value); }); } }, }; </script>
