vue3 用 setup 语法糖为什么component标签为什么不生效了

Question

控制台渲染了这个，但是子组件的内容都没有，检查了key什么的都是对的

<template>
  <div class="main-content">
    <keep-alive>
      <component :is="menuIndex" class="system-view-content" />
    </keep-alive>
  </div>
</template>

<script setup>
import EmployeeArchives from './components/EmployeeArchives'
import EmployeeFields from './components/EmployeeFields'
// 左侧菜单列表
const menuList = ref(
  [
    { label: '新建', key: 'EmployeeFields' },
    { label: '员工', key: 'EmployeeArchives' }
  ]
)

// 默认选中
const menuIndex = ref('EmployeeFields')
const menuSelect = (i) => {
  menuIndex.value = i
}
</script>

我这样写死就没毛病
<component :is="EmployeeArchives" class="system-view-content" />

Answer 1

建议下次先在官方文档找找有没有相关说明：https://v3.cn.vuejs.org/api/s...

在 <script setup> 中要使用动态组件时，需要直接用 :is="Component" 直接绑定到组件本身，而不是字符串的组件名。

Answer 2

<template>
  <div class="main-content">
    <keep-alive>
      <component :is="menuIndex" class="system-view-content" />
    </keep-alive>
  </div>
</template>

<script setup>
import EmployeeArchives from './components/EmployeeArchives'
import EmployeeFields from './components/EmployeeFields'
// 左侧菜单列表
const menuList = ref(
  [
    { label: '新建', key: EmployeeFields },
    { label: '员工', key: EmployeeArchives }
  ]
)

// 默认选中
const menuIndex = ref(EmployeeFields)
const menuSelect = (i) => {
  menuIndex.value = i
}
</script>