在Vue3中定义和重用内联组件

Question

是否可以在 Vue3 中内联定义一个“子组件”，它可以在同一个 .vue 文件/组件中重用，但无需实际定义新的

.vue

文件（即不将此子组件定义为新组件）。

用例是我有一种非常具体的格式化

<select>

选项的方法，该方法用于同一组件（

<select>

文件）中的多个

.vue

，但不会在其他任何地方使用（它也很小） ，所以我倾向于定义这个选项格式化部分内联）。我不一定要复制并粘贴格式（最好将其保留在同一个 .vue 文件中，因为它很小）。

我意识到这只是语法糖，在特定情况下可能相关也可能不相关（我也不会寻求关于这是否是一个好主意的建议）。我只是在寻找一种方法可以做到这一点（如果没有，这也是一个答案；-））

Answer 1

您可以定义

h()

函数来在 vue 3 中的

setup

脚本中创建 vnode。

例如：

<template>
<MyComponent />
</template>
<script setup>
const MyComponent = h('div', { class: 'bar', innerHTML: 'hello' })
</script>

vue文档将完全帮助你。 文档

Answer 2

你可以在 Vue2 中做这样的事情

Vue.component('my-checkbox', {
  template: '<div class="checkbox-wrapper" @click="check"><div :class="{ checkbox: true, checked: checked }"></div><div class="title">{{ title }}</div></div>',
  data() {
    return { checked: false, title: 'Check me' }
  },
  methods: {
    check() { this.checked = !this.checked; }
  }
});

可能仍然有效

Answer 3

使用

defineComponent

Vue 提供了 defineComponent，这可能是您在 Vue3 中要考虑的内联组件。这些文档不是很深入，所以我会寻找更多关于此的教程和讨论。

您可能还想了解使用

h()

进行渲染。有很多方法可以使用它！ https://vuejs.org/guide/extras/render-function

此外，Vue 有一个名为

Functional Component

的东西，对于非常简单的内联组件来说可能更干净：https://vuejs.org/guide/extras/render-function#function-components

无论如何，这是

defineComponent

的一个有效实现（确实使用 Composition API 和 Typescript，但你明白了）：

示例

<script setup lang="ts">

//...

const myInlineComponent = defineComponent((props) => {

    // Use Composition API here, like in <script setup>
    // e.g. const count = ref(0)  

    // Must return something, which ultimately is the vnode output
    return () => {
        // Use h() render function...
        //e.g. return h('div', { class: `myClass` }, () => 'Some String')
        // or JSX...
        //e.g. return <div>{count.value}</div>

        // Example using render function h():
        return h(
            Button,
            {
                onClick: (e:any) => {
                    console.log('Button clicked: ', props.someId)
                },
                class: {
                    "myClass": true
                }
            },
            () => 'Some String'
        )
    }
},
 
{
    props: {
         someId: { type: string, required: true }
    }
}

)

//...
</script>

然后在模板中使用

<myInlineComponent :id="'fdfdfdf'" />