本文已参与「新人创作礼」活动，一起开启掘金创作之路。
不废话先看效果图
父组件
<template>
<div class="about">
<p>父组件：</p>
<p> 姓名：{{userInfo.name}}</p>
<p> 年龄：{{userInfo.age}}</p>
<p>地址：{{address_phone.address}}</p>
<p>电话：{{address_phone.phone}}</p>
<p>子组件：</p>
<Demo />
</div>
</template>
<script>
import { onMounted, reactive, ref, toRefs, provide } from 'vue';
import Demo from '@/components/demo.vue'
export default {
components:{
Demo
},
setup() {
//父传子start
const userInfo = ref({//此处相当于定义变量了
name: 90,
age: 135
});
provide('userInfo', userInfo)//这个很重没有他提供给子组件，是无法在子组件中获取到数据的
//父传子end
//父子通信相互改变start
const address_phone = ref({
address: '中国', // 地址
phone: '16666666666', //手机号
})
const updateAddressPhone = (event) => {//接收/更新子组件的传值
address_phone.value = event
}
provide('updateAddressPhone', updateAddressPhone)
//父子通信相互改变end
onMounted(() => {
});
return {
userInfo,//切记定的变量要在此处抛出
updateAddressPhone,
address_phone,
};
}
}
</script>
子组件
<template>
<div>
<p>这里是接收父级的参数</p>
<p> 姓名：{{childUserInfo.name}}</p>
<p> 年龄：{{childUserInfo.age}}</p>
<button @click="clickFn">点击更新地址电话</button>
</div>
</template>
<script>
import { inject } from 'vue'
export default {
name: "demo",
setup() {
const childUserInfo = inject('userInfo')//接收父的传值
const updateAddressPhone = inject('updateAddressPhone')//更新父组件方法
const clickFn = ()=> {
updateAddressPhone({
address: '中国/河南', // 地址
phone: '15555555555', //手机号
})
}
return {
childUserInfo,
updateAddressPhone,
clickFn
}
}
}
</script>
<style scoped>
</style>
