我的Nuxt3应用程序中有以下代码:

<template>
    <div v-if="conversationId">
        <h1>Current conversation: {{ conversationId }}</h1>
        <ChatWindow :conversationId="conversationId"/>
    </div>
</template>

<script setup>

    const conversationId = useState('conversationId');
    
    const showConversation = (convId) => {
        conversationId.value = convId;
    }
    
</script>

当调用showConversation('some-other-id')函数时,conversationId会正确更改,但ChatWindow组件保持不变.

我希望ChatWindow组件替换为具有正确对话IDprops 的新组件. 如何做到这一点呢?

推荐答案

EDIT:

如果希望组件在变量更改时得到更新,则应使用key属性.随着键值的更改,应该重新呈现该组件.

试着像<ChatWindow :conversationId="conversationId" :key="conversationId" />个一样.


关于react 性的第一个答案是:

当您希望组件自动更新时,应使用引用或计算(computed)属性.

https://vuejs.org/guide/essentials/computed.html#basic-example

https://vuejs.org/guide/essentials/template-refs.html

我不确切地知道它如何与useState()一起工作,但您可以try 只使用一个ref:

const conversationId = ref(useState('conversationId'));

或者可能使用显示部件的计算(computed)属性:

const convId = computed(() => { return useState('conversationId') })个 然后在html部分中使用convID.

如果它与useState一起工作,可能是一次测试.

Vue.js相关问答推荐

虚拟DOM在Vue中姗姗来迟

为什么元素会从Vue 3中的TransitionGroup左上角出现?

Vue.js 3 运行时挂载组件实例

如何在 Nuxt3 中使用 nuxtjs/auth-next 模块?

如果在 VueJS/VuetifyJS 中切换switch,则调用函数

如何将字符串中的
解析为 VUE.js 中的 html 标记

Vue:将点击事件绑定到动态插入的内容

在 Vue 中启用(控制台)记录路由事件

VueJS:如何在组件数据属性中引用 this.$store

如何使用带有自定义标签和类的`transition-group`

使用 vue-cli 遇到无法推断解析器错误

Vue.js 从模板中分离样式

Vue-Router 抽象父路由

如何使用 laravel-mix 将 bootstrap-vue 加载到 Laravel 5 中?

Modal 内部的 Vue.js AJAX 调用

将登录页面包含在单页应用程序中是否不安全?

Vuetify - 如何进行分页?

Axios 捕获错误请求失败,状态码 404

Vue中的嵌套循环

将它们分开时将 Django 的 csrf_token 放入 Vuejs