vue3内置组件component使用语法

采用script setup 语法，那么 template的 component :is="" / 的is不再可以是字符串

第一种写法

像官方那样写

<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>

<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</template>

第二种写法

模板编译还是会支持原来的写法的, 而且组件名称也常常需要vue2那样去写

<script>
  import Fooooo from "./Foo.vue"
  import Barrrr from "./Bar.vue"
  export default {
    name: "Test",
    components: {
      Fooooo,
      Barrrr
    }
  }
</script>
<template>
  <component :is="'Fooooo'" />
  <component :is="'Barrrr'" />
</template>

赏

×

纯属好玩

扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦