vue3 子组件的props不能解构

home 文件

<template>
  <div class="home">
    <nav-Headers :titleNum="count.titleNum" @chang="chang" />
    <p @click="toabout">跳转about</p>
    <p>{{count.countAbout}}</p>
    <p>{{count.changNumber}}</p>

  </div>
</template>

<script>

import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
} from "vue";

import router from "@/router/index";
import { reactive } from "vue";
import navHeaders from "@/components/home/nav-header";
export default {
  name: "Home",
  components: {
    navHeaders
  },
  setup() {
    const count = reactive({
      titleNum: 10,
      countAbout:'',
      changNumber: ""
    });
    onMounted(()=>{
         count.countAbout = router.currentRoute.value.params.id

    })
    let chang = value => {
      count.changNumber = value;
    };
    let toabout = () => { //跳转About 传递参数 
      router.push({
        name: "About",
        params:{
          id:'homehomehomehome'
        }
      });
    };

    return {
      toabout,
      count,
      chang
    };
  }
};
</script>

子组件 nav-header文件
<template>
  <div>
    <p>{{titleNum}}</p>
    <p @click="chang">传递父元素</p>
  </div>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered,
} from "vue";
import { reactive } from "vue";
export default {
  name: "navheader",
  props: {
    titleNum: Number
  },
  emits: {
    chang: null
  },
  setup(props, ctx) {
    console.log(props.titleNum) //接受父组件传递到的值 不能解构否则会没有响应式
    const navNumber = reactive({
      chvNavNumber: 0
    });

    onBeforeMount(() => {
      console.log("onBeforeMount-->beforeMount 模板渲染未挂载到页面中去");
    });
    onMounted(() => {
        chang()
      console.log("onMounted-->mounted 真实dom已经生成");
    });

    onBeforeUpdate(() => {
      console.log("onBeforeUpdate-->beforeUpdate 数据更新之前");
    });

    onUpdated(() => {
      console.log("onUpdated-->updated 数据更新之后");
    });

    onBeforeUnmount(() => {
      console.log("onBeforeUnmount-->beforeDestroy 页面销毁前");
    });
    onUnmounted(() => {
      console.log("onUnmounted-->destroyed 页面销毁后");
    });

    // 被包含在<keep-alive>中的组件，会多出两个生命周期钩子函数
    onActivated(() => {
      console.log("onActivated-->activited keep-alive 缓存的组件激活时调用");
    });
    onDeactivated(() => {
      console.log("onDeactivated-->deactivated keep-alive 缓存的组件停用时调用");
    });

    onErrorCaptured(() => {
      console.log("onErrorCaptured-->errorCaptured 当捕获一个来自子孙组件的异常时激活钩子函数");
    });
    // 调试用
    onRenderTracked(() => {
      console.log("onRenderTracked 状态跟踪，它会跟踪页面上所有响应式变量和方法的状态，也就是我们用return返回去的值，他都会跟踪。只要页面有update的情况，他就会跟踪，然后生成一个event对象，我们通过event对象来查找程序的问题所在");
    });
    onRenderTriggered(() => {
      console.log("onRenderTriggered 状态触发,它不会跟踪每一个值，而是给你变化值的信息，并且新值和旧值都会给你明确的展示出来");
    });
   







    let chang = () => {
    let num = navNumber.chvNavNumber++;
    let changeNumber = ctx.emit("chang", num);
    };

    return {
      chang
    };
  }
};
</script>

<style>
</style>

跳转about 组件


<template>
<div>

 <p @click="routerHome">跳转home</p>
<p>{{aboutData.count}}</p>
</div>
</template>

<script>
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  onActivated,
  onDeactivated,
  onErrorCaptured,
  onRenderTracked,
  onRenderTriggered
} from "vue";
import router from "@/router/index";

import { reactive } from "vue";
export default {
  name: "about",
  setup() {
    const aboutData = reactive({
      count: null
    });

    onMounted(()=>{
      aboutData.count = router.currentRoute.value.params.id //接受homd传递的值
    })
    let routerHome = () => {
      router.push({
      name:'Home',
      params:{
        id :"aboutaboutaboutabout"
      }

      });
    };
    return {
      routerHome,
      aboutData
    };
  }
};
</script>

<style>
</style>