在组合中使用道具时组件保持可见 API

Question

我有一个显示产品信息的 vue 3 应用程序。 home 组件显示所有可用的产品。他们每个人都有一个按钮，可以将我带到一个组件，该组件显示有关称为 Single Box 的所述产品的信息。它从路由参数中获取产品 ID，然后通过 graphql 获取其他信息。它看起来像这样：

<template>
<BoxDisplay :box="box"></BoxDisplay>
</template>

<script>
import { useQuery, useResult } from '@vue/apollo-composable';
import { useRoute } from 'vue-router'
import singleBoxQuery from '../graphql/singleBox.query.gql'
import BoxDisplay from '../components/BoxDisplay'

export default {
    components: {
        BoxDisplay
    },
    setup() {
        const route = useRoute();
        const boxId = route.params.id
        const {result } = useQuery(singleBoxQuery, {id: boxId})
        const box = useResult(result, null)
        return {
            boxId,
            box
        }
    }
}
</script>

然后使用BoxDisplay 组件显示当前框的信息。稍后将在此页面上进行更多操作，因此需要 BoxDisplay。它看起来像这样：

<template>
<div class="p-d-flex p-jc-center">
    <div v-if="box">
        <h1>{{box.Name}}</h1>
        <div v-html="myhtml"></div>
    </div>
    <div v-else>
        <ProgressSpinner />
    </div>
    </div>
</template>

<script>

export default {
    props: {
        box: {}
    },
    setup(props){
        const myhtml = "<h1>hello</h1>" + props.box.Name
        return {
            myhtml
        }
    }
}
</script>

现在的问题是，只要我在 setup() 中使用 props，当我在浏览器中单击返回时，组件就会保持可见。它会一直留在那里，直到我刷新页面。我做错了什么？

Answer 1

Use ref and computed

https://v3.vuejs.org/guide/composition-api-introduction.html#reactive-variables-with-ref

```

import { ref, computed } from 'vue'
```

const myhtml = computed(() => '<h1>hello</h1>' + props.box.Name)

or

const myhtml = ref('<h1>hello</h1>' + props.box.Name)

在组合中使用道具时组件保持可见 API

Component stays visible when using props in composition API

vue.js

vue-router

vuejs3

vue-composition-api