从函数返回 Vue 组件答案

【问题标题】：Return vue component from a function从函数返回 Vue 组件
【发布时间】：2022-01-25 05:57:18
【问题描述】：

我是 Vue 新手，我想根据任务状态渲染一个 SVG 图标，并想为此创建一个可重用的函数，我该怎么做？

在 React 中我可以做这样的事情：


const iconStatusMapping = {
  todo: <svg></svg>,
  processing: <svg>...</svg>,
  done: <svg>...</svg>
}

// utils.ts
export const getTaskStatusIcon = (status: TaskStatus) => {
  return iconStatusMapping[status]
}

function App() {
  const status = "todo"

  return (
    <div>{getTaskStatusIcon(status)} {status}</div>
  )
}

如何在 Vue3 中做类似的事情？

【问题讨论】：

标签： vue.js templates jsx vuejs3

【解决方案1】：

在 React 中，将重用元素定义为未包装在函数中的 JSX 可能不是一个好主意，因为元素对象在每次渲染时都是新的。这可能对 SVG 图标没有影响，但可能会在 other cases 中产生意外行为。

在Vue中，这个sn-p可以直接翻译成渲染函数和JSX。

像 SVG 图标这样的静态 HTML 可以安全地定义为字符串并使用 Vue v-html 输出，同样适用于 React dangerouslySetInnerHTML：

const iconStatusMapping = {
  todo: `<svg></svg>`,
  ...
}

和

v-html="iconStatusMapping[status]"

【讨论】：

听起来不错，但是如果我想为此提供道具怎么办，让我们不再将其作为 SVG 图标，而是说它是一个组件？谢谢。
那么一个状态应该被映射到整个组件，即todo: TodoIcon，并像动态组件<component :is="iconStatusMapping[status]" v-bind="{...}"/>一样使用。同样的方法也适用于 React。