vue3组件封装之搜索组件的封装

Vue3 的组件封装非常简单，下面是一个搜索组件的封装示例：

首先，创建一个 Search.vue 的组件，它的模板如下：

<template>
  <div class="search">
    <input type="text" v-model="searchInput" @input="handleInput" />
    <button @click="handleSearch">搜索</button>
  </div>
</template>

在组件中，我们需要引入 `reactive`，这是 Vue3 中新加入的函数，用于将数据转换为响应式的数据。我们还需要定义 `props`，用于接收父组件传递的参数，以及定义 `emit`，用于向父组件发送事件。

import { defineComponent, reactive, emit } from 'vue';

export default defineComponent({
  name: 'Search',
  props: {
    placeholder: {
      type: String,
      default: '请输入关键词',
    },
  },
  setup(props, { emit }) {
    const searchInput = reactive({
      value: '',
    });

    const handleInput = (event) => {
      searchInput.value = event.target.value;
    };

    const handleSearch = () => {
      emit('search', searchInput.value);
    };

    return {
      searchInput,
      handleInput,
      handleSearch,
    };
  },
});

在 `setup` 函数中，我们使用 `reactive` 将 `searchInput` 对象转换为响应式数据。当用户输入关键词时，`handleInput` 函数被调用，将输入的值赋值给 `searchInput.value`。当用户点击搜索按钮时，`handleSearch` 函数被调用，向父组件发送 `search` 事件，并将输入框的值作为参数传递给父组件。

最后，在父组件中使用该组件：

<template>
  <div>
    <Search placeholder="请输入关键词" @search="handleSearch" />
    <ul>
      <li v-for="item in searchResult" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import Search from './Search.vue';

export default {
  components: {
    Search,
  },
  data() {
    return {
      searchResult: [],
    };
  },
  methods: {
    handleSearch(keywords) {
      // 这里实现搜索逻辑，将搜索结果赋值给 searchResult
      this.searchResult = [
        { id: 1, name: '搜索结果1' },
        { id: 2, name: '搜索结果2' },
        { id: 3, name: '搜索结果3' },
      ];
    },
  },
};
</script>

在父组件中，我们通过 `@search` 监听子组件的 `search` 事件，并在 `handleSearch` 方法中实现搜索逻辑。将搜索结果赋值给 `searchResult`，然后通过 `v-for` 渲染出结果列表。

这就是 Vue3 中搜索组件的封装方法，简单易用。