Vue 3 自定義選擇器：接受選項作為 HTML 的完整指南

javascript

2024-03-16 01:23:08

在 Vue 3 中创建自定义选择器组件，接受选项作为 HTML

问题：

构建自定义选择器组件时，我们需要选项以 HTML 格式传递，而不是作为道具，以便对选项进行更深入的自定义，例如添加图标或文本样式。传统的实现仅允许选项作为字符串数组传递，这限制了定制化能力。

解决方案：

步骤 1：使用具名插槽

我们可以利用 Vue 3 的具名插槽功能，它允许在组件中指定插槽的名称，并通过插槽内的 HTML 内容动态呈现数据。对于我们的自定义选择器组件，我们可以使用 option 具名插槽来接收选项 HTML。

步骤 2：定义插槽作用域

为了访问插槽内的数据，我们需要定义一个插槽作用域，它本质上是一个 JavaScript 对象，包含插槽中可用数据的属性。对于我们的选择器组件，我们可以将 option 插槽的作用域定义为：

{ option }

其中 option 属性将包含每个选项 HTML 的数据。

步骤 3：提取选项数据

在组件的脚本设置中，我们可以使用 setup 函数来提取插槽内每个选项的数据：

const setup = (props, context) => {
  const options = ref([]);
  watch(() => context.slots.option, (newOptions) => {
    options.value = newOptions.map((option) => option.component.proxy.option);
  });
  return { options };
};

步骤 4：使用提取的数据

提取选项数据后，我们就可以在组件中使用这些数据来渲染选项。例如，我们可以使用 v-for 指令来遍历 options 数组并动态生成选项元素：

<template>
  <div>
    <span v-for="option in options" :key="option.value">{{ option.text }}</span>
  </div>
</template>

步骤 5：使用 props 来控制组件行为

虽然我们使用插槽来传递选项 HTML，但我们仍然可以使用 props 来控制组件的整体行为。例如，我们可以使用 modelValue prop 来接收所选选项的值，并使用 update:modelValue 事件来更新它。

示例代码：

<template>
  <div>
    <span v-for="option in options" :key="option.value">{{ option.text }}</span>
  </div>
</template>

<script setup>
const options = ref([]);
watch(() => context.slots.option, (newOptions) => {
  options.value = newOptions.map((option) => option.component.proxy.option);
});

const props = defineProps({
  modelValue: String,
});

const emit = defineEmits(["update:modelValue"]);

const selectOption = (option) => {
  emit("update:modelValue", option.value);
};
</script>