vue3 父子组件通信

老规矩不废话先看效果图

 父组件

<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>