一、组件之间的关系
1.父子关系
2.兄弟关系
3.后代关系
二、父子组件之间的数据共享
1.父-->子共享数据
父组件通过v-bind属性绑定向子组件共享数据,子组件需要使用props接受数据。
javascript"><template><p>父组件</p><Son :msg="msg" :count="count"></Son>
</template>
<script>
import Son from './son.vue'
export default {components:{Son},data(){return{msg:'hello',count:123}}
}
</script><template><p>子组件{{ msg }}{{ count }}</p>
</template>
<script>
export default {props:{msg:String,count:Number}
}
</script>
2.子-->父共享数据
子组件通过自定义事件向父组件共享数据。
javascript"><template><p>父组件{{ count }}</p><Son @countFn="changeFn"></Son>
</template>
<script>
import Son from './son.vue'
export default {components:{Son},data(){return{count:123}},methods:{changeFn(num){this.count+=num}}
}
</script><template><p>子组件 <button @click="addFn">按钮</button></p>
</template>
<script>
export default {emits:['countFn'],data(){return{count:123}},methods:{addFn(){this.$emit('countFn',this.count)}}
}
</script>
3.父<-->子 双向数据同步
父组件在使用子组件期间,可以使用v-model指令维护组件内外数据的双向同步。
javascript"><template><p>父组件{{ count }}</p><Son v-model:count="count"></Son>
</template>
<script>import Son from './son.vue'export default {components:{Son},data(){return{count:123}}}
</script><template><p>子组件{{ count }} <button @click="addFn">按钮</button></p>
</template>
<script>
export default {props:['count'],emits:['update:count'],methods:{addFn(){this.$emit('update:count',this.count+1)}}
}
</script>
三、兄弟组件之间的数据共享EventBus
兄弟组件之间实现数据共享的方案是EventBus。可以借助于第三方包mitt来创建eventBus对象,从而实现兄弟组件之间的数据共享。
1.创建eventBus,在数据的接收方和发送方共享eventBus对象。
2.数据接收方,导入并得到eventBus实例对象,调用eventBus的on()方法,声明自定义事件,通过事件回调接收数据。bus.on('事件名称', 事件处理函数)
3.数据发送方,导入并得到eventBus实例对象,调用eventBus的emit()方法,向外发送数据。
bus.emit('事件名称', 要发送的数据)
javascript">npm i mitt//eventBus.js
import mitt from 'mitt';
const bus = mitt();
export default bus;<template><p>父组件</p><div class="son"><Son1></Son1><Son2></Son2> </div>
</template>
<script>
import Son1 from './son1.vue'
import Son2 from './son2.vue'
export default {components:{Son1,Son2},
}
</script><template><p>数据发送方son1:{{ count }} <button @click="addFn">按钮</button></p>
</template>
<script>
import bus from '../../ulits/eventBus'
export default {data(){return{count:0}},methods:{addFn(){this.count+=1bus.emit('changeCount',this.count)}}
}
</script><template><p>数据接收方son2:{{ count }}</p>
</template>
<script>
import bus from '../../ulits/eventBus'
export default {data(){return{count:0}},created(){bus.on('changeCount',(count)=>{this.count =count })}
}
</script>
四、后代关系组件之间的数据共享provide和inject
指的是父节点的组件向其子孙组件共享数据。此时组件之间嵌套关系比较复杂,可以使用provide和inject实现后代关系组件之间的数据共享。
1.父节点使用provide
2.子孙节点使用inject数组,接收父级节点向下共享的数据。
3.父节点使用provide向下共享数据时,可以结合computed函数向下共享响应式数据。
javascript"><template><p>父组件</p>{{ color }}<button @click="color='blue'"> Toggle Blue</button><Leval2></Leval2>
</template>
<script>
import {computed} from 'vue'
import Leval2 from './leval2.vue'
export default {components:{Leval2},data(){return{color:'red',}},provide(){return{count: 0,color:computed(()=> this.color),}}
}
</script><template><p>二级组件</p><Leval3></Leval3>
</template>
<script>
import Leval3 from './leval3.vue'
export default {components:{Leval3},
}
</script><template><p>三级组件{{ count }}{{color}}</p>
</template>
<script>
export default {inject:['color','count']
}
</script>
五、全局数据共享vuex