您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

vue3props的值没有动态更新是为什么?

vue3props的值没有动态更新是为什么?

最近在研究vue3,尝试写个demo练练手,但是发现传给子组件的值并没有动态更新,因为hook里面只return初始化的那一次,应该要怎么写呢?

父组件:

const props = defineProps({
  user: {
    type: String,
    default: '',
  }
})
const { user } = toRefs(props)
const { repositories } = useUserRepositories(user)

<template>
  <RepositoriesList :list="repositories" />
</template>

子组件:

const props = defineProps({
  list: {
    type: Array,
    default: []
  }
})
const dataList = computed(() => props.list)

<template>
  <div class="list-wrap">
    <div class="has-data" v-if="dataList && dataList.length > 0">
      <div class="item" v-for="item of dataList" :key="item.id">
        <span>{{ item.owner.login }}</span>
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div v-else class="blank">无数据</div>
  </div>
</template>

hook:

export default function useUserRepositories(user) {
  let repositories = reactive([]);
  const getUserRepositories = async () => {
    repositories = await fetchUserRepositories(user.value);
  };

  watch(user, getUserRepositories);

  onMounted(getUserRepositories);

  return {
    repositories,
  };
}
vue.js 2022/2/18 19:31:55 有520人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶