一、provide和inject
由于vue3框架原因导致vue2使用的全局事件总线被取消,在vue3使用provide和inject函数可以实现父组件和它的后代组件之间可以进行通信(父子通信还是建议用props)
1.provide
作用:向子组件以及子孙组件传递数据;
语法:provide( 'key', 'value' );
2.inject
作用:接收父组件或祖先组件传递过来的数据;
语法:inject('key');
<!-- 父组件:App.vue -->
<template>
<div>
<setupDemo6></setupDemo6>
</div>
</template>
<script>
import setupDemo6 from './components/setupDemo6.vue'
import { provide } from 'vue';
export default {
name: 'App',
components: {
setupDemo6,
setupDemo7
},
setup(){
let person = {
'name' : '张三',
'age' : 10,
'gender' : '女',
"phone" : '18890178920'
}
provide("info", person);
}
}
</