从一处安装多个组件的脚本 - Nuxt3

Question

我使用 Nuxt3

我有一个

/components/icons

文件夹

里面

/components/icons

有很多图标:

• /components/icons/apps.vue

• /components/icons/arrow-up.vue

• /components/icons/bookmark.vue

• /components/icons/home.vue

• /components/icons/edit.vue

图标采用 svg 格式，例如，我想为所有这些图标编写此代码，而不是在每个文件中重复它们。

任何图标文件的示例：

<script setup lang="ts">
const props = defineProps({
  size: {
    type: Number,
    required: false,
  },
});

const svg = ref();
const size = ref(props.size);

onMounted(() => {
  if (!size.value) {
    size.value = parseFloat(window.getComputedStyle(svg.value).fontSize);
  }
});
</script>
<template>
  <svg
    ref="svg"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg">
    <path
      d="M3.35288 9.7093C4.00437 6.92879 6.17301 4.75775 8.95043 4.10553C10.9563 3.6345 13.0437 3.6345 15.0496 4.10553C17.827 4.75775 19.9956 6.92879 20.6471 9.70931C21.1176 11.7174 21.1176 13.8072 20.6471 15.8152C19.9956 18.5957 17.827 20.7668 15.0496 21.419C13.0437 21.89 10.9563 21.89 8.95044 21.419C6.17301 20.7668 4.00437 18.5957 3.35288 15.8152C2.88237 13.8072 2.88237 11.7174 3.35288 9.7093Z"
      fill="#363853"
      fill-opacity="0.15"
      stroke="#363853"
      stroke-width="1.5" />
    <path
      d="M14.5 12.7622H9.5M12 15.265L12 10.2595"
      stroke="#363853"
      stroke-width="1.5"
      stroke-linecap="round" />
  </svg>
</template>

我不想在每个图标中重复这段代码， 另外，当调用图标时，它默认是这样的，我不想改变它的使用方式：

<IconsAdd></IconsAdd>
<IconsApps></IconsApps>
<IconsBookmark></IconsBookmark>
<IconsArrowsUp></IconsArrowsUp>

此功能在 nuxt 中可用：

组件名称 如果您在嵌套目录中有一个组件，例如：

-| components/
---| base/
-----| foo/
-------| Button.vue

...那么组件的名称将基于其自己的路径目录和文件名，并删除重复的段。因此，组件的名称将为：

<BaseFooButton />

Answer 1

这始终取决于具体情况。

extends

是扩展基本组件的最佳选择，可以增强一些

script

逻辑并完全替换

template

，因为在这种情况下它有效地取代了

render

选项。

有时切换到选项 API 更有效。这包括像

mounted

这样的生命周期挂钩，它们可以根据

extends

的工作方式堆叠起来。

否则

extends

可以与组合 API 一起使用。它扩展了

props

等选项，但不影响

setup

，需要手动处理。可以显式指定 props，这在某些情况下很有用，例如为了更好地支持 IDE 中的 prop 自动补全。

setup

可以组合，但由于 JavaScript 中变量作用域的工作方式，无法替换基类

setup

的局部变量，需要考虑到这一点。例如：

BaseIcon.vue

<template></template>
<script>
export default {
  props: ...
  setup(props) {
    ...
}
</script>

IconSome.vue

<template>
<svg>...
</template>
<script>
import BaseIcon.vue from '...'
export default {
  extends: BaseIcon,
  props: {
    ...BaseIcon.props,
    foo: ...
  },
  setup(props, ctx) {
    const instance = Base.setup(props, ctx);
    instance.bar = ref(2); // potentially bad
    let baz = ref(3);
    return { ...instance , baz };
  }

script setup

应避免与

extends

一起使用，因为它是 DSL，而不是符合规范的 JavaScript，它以未记录且不可预测的方式工作，例如众所周知，在生产中编译为没有

render

选项的组件，这会阻止它以预期的方式使用模板扩展组件