Return 来自函数的 vue 组件

Question

我是 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 中做类似的事情？

Answer 1

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

中产生意外行为

在 Vue 中，此代码段可以直接转换为渲染函数和 JSX。

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

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

和

v-html="iconStatusMapping[status]"

Return 来自函数的 vue 组件

Return vue component from a function

templates

jsx

vue.js

vuejs3