使用Vue3完成父子件传递数据，点击按钮完成数据更新

最新推荐文章于 2024-10-08 11:49:30 发布

AzeShinja

最新推荐文章于 2024-10-08 11:49:30 发布

阅读量937

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/AzeShinja/article/details/118421023

Vue 专栏收录该内容

55 篇文章

订阅专栏

本文讲述了在使用Vue的Reactive模式时，如何解决导航栏与子组件间数据双向绑定不成功的问题，通过实例代码和调试过程揭示了可能的原因及解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

以后有时间再写详细的Bug总结，其中碰到的缺陷就是使用reactive的时候数据双向绑定失败

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

    <div class="navContainer">
      <ul class="navList">
        <li
          v-for="(item, index) in navList"
          :key="item.key"
          @click="navClick(index, item.key)"
          :class="navNo == index ? 'navActive' : ''"
        >
          <div class="navIcon">
            <i class="icon icon-favicon-32x32"></i>
          </div>

          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>


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,
  },
});
</script>

父组件获得数据:
Home.vue

  <div class="home">
    <oneNav @navClick="navClick"></oneNav>
    <div class="displayMain">
      <controlShow></controlShow>
      <div class="contentArea">
        <subNav :routerName="routerKey"></subNav>
        <div class="content">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>

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

<div class="subNav">
    <div class="subNavTitle">
      <span>
        {{ subNavList.title }}
      </span>
    </div>
    <ul class="subNavSubTitle">
      <li
        v-for="(item, index) in subNavList.children"
        :key="item.id"
        @click="subNavNo = index"
        :class="subNavNo == index ? 'subNavActive' : ''"
      >
        <div class="navIcon">
          <i class="icon icon-favicon-32x32"></i>
        </div>

        <p>{{ item.name }}</p>
      </li>
    </ul>
  </div>

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,
    };
  },
});