如何在 Vue.js 中创建可重用的模板部件？

Question

我有一个组件，其中有几个块在整个模板中重复。这些块可能有一个或两个条件，并且可能调用事件处理程序中的一些方法，但大多数情况下它们都非常简单。

为几个元素创建一个完整的、单独的组件确实不值得，而且传递数据和方法也不是那么简单，这使得组件更难以维护。因此这些块不会在任何其他组件中使用。

我确实需要能够在该组件内为这些块定义“子组件”或“模板” 。我还不知道这是否可能。有没有人为此找到一个干净的解决方案？

Answer 1

组件可以定义为渲染函数，这对于JSX来说尤其容易：

const ComponentA = props => (
  <div>
    <label>{props.label} <input type="text" /></label>
  </div>
)

您可以在同一文件中将多个子组件声明为渲染函数（或完整的组件定义对象，如果需要），并在组件的模板中重用它们。Vue 3 的<script setup>块也有助于使其更加简洁：

<script lang="jsx" setup>
const SubComponentA = (props) => (
    <div>
      <label>{props.label}</label>
      <input type="number" />
    </div>
)
const SubComponentB = (props) => (
    <div>
      <label>{props.label}</label>
      <textarea />
    </div>
)
</script>

<template>
  <SubComponentA label="Label 1" />
  <SubComponentB label="Label 2" />
  <SubComponentA label="Label 3" />
  <SubComponentB label="Label 4" />
</template>

演示