如何使用<component :is="">在 vue 3 脚本设置中 [英] How to use <component :is=""> in vue 3 script setup
本文介绍了如何使用<component :is="">在 vue 3 脚本设置中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用实验性的 脚本设置 以创建学习环境.我有一个自制的导航栏，打开单个组件.
I am using the experimental script setup to create a learn enviroment. I got a selfmade navigation bar with open a single component.
我在使用
I am having trouble using the <component :is="" /> method. This method is described in the docs under component basics -> dynamic-components
在 Vue 3 Composition API 中，它按预期工作:
In the Vue 3 Composition API, it works as expected:
<template>
<NavigationBar
@switchTab="changeTab"
:activeTab="tab"
/>
<component :is="tab" />
</template>
<script>
import { ref } from 'vue'
import NavigationBar from './components/NavigationBar.vue'
import TemplateSyntax from './components/TemplateSyntax.vue'
import DataPropsAndMethods from './components/DataPropsAndMethods.vue'
export default {
components: {
NavigationBar,
TemplateSyntax,
DataPropsAndMethods
},
setup () {
const tab = ref('DataPropsAndMethods')
function changeTab (newTab) {
tab.value = newTab
}
return {
changeTab,
tab
}
}
}
</script>
我使用 脚本设置 的方法失败了:
My approach with the script setup fails:
<template>
<NavigationBar
@switchTab="changeTab"
:activeTab="tab"
/>
<component :is="tab" />
</template>
<script setup>
import NavigationBar from './components/NavigationBar.vue'
import TemplateSyntax from './components/TemplateSyntax.vue'
import DataPropsAndMethods from './components/DataPropsAndMethods.vue'
import { ref } from 'vue'
const tab = ref('DataPropsAndMethods')
function changeTab (newTab) {
tab.value = newTab
}
</script>
你知道如何用脚本设置方法解决这个问题吗?
do you got any idea how to solve this with the script setup method?
推荐答案
好像用
