采取Vue3完成父子件传送数据，点按钮完成信息更新

由于时间原因，我只会先把编写代码的顺序放在上面。

我以后有时间会写详细的。Bug总结，其中遇到的缺陷是使用reactive数据双向绑定失败

主导航栏： nav.vue 子组件A

    

      

        

          

            
          

          
{{ item.name }}
        
      
    

export default defineComponent({
  setup(props, context) {
    const navNo = ref(0);
    const { navList } = navRander();
    const navClick = (index, navName) => {
      navNo.value = index;
      console.log(navName);
      const key = navName.slice(1);
      context.emit(navClick, { key });
    };
    return {
      navList,
      navNo,
      navClick,
    };
  },
  components: {
    Setting,
  },
});

父组件获取数据:
Home.vue

  

    
    

      
      

        
        

          
        
      
    
  

export default {
  setup(_, ctx) {
    // const routerKey = ref(Homepage);
    const routerKey = ref(Homepage);
    const navClick = (param) => {
      console.log(param.key);
      routerKey.value = param.key;
    };

    return {
      routerKey,
      navClick,
    };
  },
  components: {
    oneNav,
    controlShow,
    subNav,
  },
};

子组件B:
subNav.vue

    

      
        {{ subNavList.title }}
      
    
    

      

        

          
        

        
{{ item.name }}
      
    
  

import { toRefs, reactive, ref, watch, defineComponent } from vue;
import subNavData from ../../../assets/config/subNav;

export default defineComponent({
  props: {
    routerName: String,
  },
  setup(props) {
    // 辅助导航栏的数量
    const subNavNo = ref(null);
    const { routerName } = toRefs(props);
    const key = routerName.value;
    const subNavList = reactive({
      title: subNavData[key].title,
      children: subNavData[key].children,
    });

    console.log(传输参数路由的值, routerName.value);
    // 单击并替换主导航栏按钮key值
    watch(routerName, (newValue, old) => {
      console.log(newValue, old);
      subNavList.title = subNavData[newValue].title;
      subNavList.children = subNavData[newValue].children;
      console.log(subNavList);
    });

    return {
      subNavList,
      subNavNo,
      watch,
    };
  },
});