**为您的组件选择一个独特的、引人入胜的标题，例如“Vue 3 Composition API：构建一个可复用的标签输入组件”。

前端

2023-10-10 23:02:37

利用 Vue 3 Composition API 构建强大的标签输入组件

简介

现代 Web 应用程序离不开标签输入组件，这些组件可帮助管理和收集元数据。在本文中，我们将深入探索使用 Vue 3 Composition API 构建一个可复用的标签输入组件的详细步骤。

理解 Composition API

Composition API 是 Vue 3 中的新特性，它允许从组件选项中提取状态和逻辑。这提供了灵活性，让开发者可以采用更声明性和可重用方式组织代码。

构建标签输入组件

1. 创建模板

使用 <input> 元素作为输入框，绑定 v-model 以管理标签数组。
包含 <template> 块，使用 v-for 指令展示当前标签列表。

2. 定义组合函数

定义组件属性和事件。
使用 computed 和 watch 定义响应式状态和侦听器。
在 setup 函数中，使用 ref 和 reactive 创建标签数组和组件状态。

3. 实现标签操作

添加键盘事件监听器，响应用户输入，添加、删除和修改标签。
定义方法来获取、设置和验证标签。

4. 样式和主题化

根据需求对组件进行样式化和主题化。

SEO 优化

使用与组件功能相关的关键词（如“标签输入”、“Vue 3”、“Composition API”）。
撰写简洁明了的元，解释组件的用途和优势。

代码示例

以下示例代码展示了如何使用 Composition API 构建标签输入组件：

<script>
import { defineProps, defineEmits, ref, watch, reactive, computed } from 'vue'

export default {
  name: 'TagInput',
  props: defineProps({
    tags: {
      type: Array,
      default: () => []
    }
  }),
  emits: defineEmits(['update:tags', 'input']),
  setup(props, { emit }) {
    const tags = ref(props.tags)

    // 计算属性
    const uniqueTags = computed(() => [...new Set(tags.value)])

    // 方法
    const addTag = tag => {
      if (!uniqueTags.value.includes(tag)) {
        tags.value.push(tag)
        emit('input', tags.value)
      }
    }

    const removeTag = tag => {
      tags.value = tags.value.filter(t => t !== tag)
      emit('input', tags.value)
    }

    const setTags = newTags => {
      tags.value = newTags
      emit('update:tags', newTags)
      emit('input', newTags)
    }

    // 侦听器
    watch(tags, (newTags, oldTags) => {
      if (newTags !== oldTags) {
        emit('update:tags', newTags)
      }
    })

    return {
      tags,
      addTag,
      removeTag,
      setTags
    }
  }
}
</script>

<template>
  <input
    v-model="tags"
    :placeholder="'Add a tag'"
    @keydown.enter="addTag(tags)"
  >
  <ul>
    <li v-for="tag in tags" :key="tag">{{ tag }}
      <button @click="removeTag(tag)">x</button>
    </li>
  </ul>
</template>