vue3 は高度な検索コンポーネントを作成します

Vue3 で高度な検索コンポーネントを作成するには、次の手順に従います。

コンポーネントの作成

Vue3 プロジェクトでは、単一ファイルコンポーネントを通じて高度な検索コンポーネントを作成できます。たとえば、 AdvancedSearch.vue ファイル内でコンポーネントを定義します。

<template>
  <div>
    <!-- 高级搜索表单 -->
  </div>
</template>

<script>
export default {
  name: "AdvancedSearch",
};
</script>

<style>
/* 组件样式 */
</style>

コンポーネントのプロパティを定義する

外部から渡されるパラメータを受け取るために、コンポーネントで props 属性を定義します。次に例を示します。

export default {
  name: "AdvancedSearch",
  props: {
    fields: {
      type: Array, // 表单字段配置
      required: true,
    },
    value: {
      type: Object, // 表单值
      default: () => ({}),
    },
  },
};

このうち、fields 属性はフォームフィールドの構成を定義するために使用され、value 属性はフォームのデフォルト値を定義するために使用されます。

レンダリングフォーム

fields フォームコンポーネントを作成し、属性のフィールド構成に従ってレンダリングします。次に例を示します。

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <div v-for="field in fields" :key="field.name">
        <label :for="field.name">{
   
   { field.label }}</label>
        <component :is="field.type" v-model="value[field.name]" :options="field.options"></component>
      </div>
      <button type="submit">搜索</button>
    </form>
  </div>
</template>

コンポーネント内のループを使用して v-for 各フォームフィールドをレンダリングし、 v-model 命令を使用してフォーム値をバインドし、 <component :is> ラベルを使用して対応するフォームコンポーネントを動的に読み込みます。

フォームコンポーネントを定義する

フォームフィールドのタイプに応じて対応するフォームコンポーネントを定義し、コンポーネントにバインディングとイベント応答ロジックを入力します。たとえば、 Input.vue 入力ボックスフォームコンポーネントを次のように定義します。

<template>
  <input :value="value" @input="$emit('input', $event.target.value)">
</template>

<script>
export default {
  props: {
    value: { // 绑定值
      type: String,
      default: "",
    },
  },
};
</script>

フォームを送信する

コンポーネント内で handleSubmit フォーム送信アクションを処理するメソッドを定義します。例えば

export default {
  name: "AdvancedSearch",
  props: {
    fields: {
      type: Array,
      required: true,
    },
    value: {
      type: Object,
      default: () => ({}),
    },
  },
  methods: {
    handleSubmit() {
      // 提交表单事件
      this.$emit("submit", this.value);
    },
  },
};

フォームが送信されると、 submit フォームの値をパラメータとして渡すイベントがトリガーされます。

コンポーネントを使用する

親コンポーネントで新しく作成した高度な検索コンポーネントを使用し、対応するパラメーターを渡します。次に例を示します。

<template>
  <div>
    <AdvancedSearch :fields="fields" v-model="searchParams" @submit="handleSubmit" />
  </div>
</template>

<script>
import AdvancedSearch from "./AdvancedSearch.vue";
export default {
  components: {
    AdvancedSearch,
  },
  data() {
    return {
      fields: [
        {
          name: "name",
          label: "姓名",
          type: "input",
        },
        {
          name: "age",
          label: "年龄",
          type: "input",
        },
        // 其他表单字段配置...
      ],
      searchParams: {},
    };
  },
  methods: {
    handleSubmit(params) {
      // 处理表单提交事件
    },
  },
};
</script>

親コンポーネントで詳細検索フォームのフィールド構成とフォーム値を定義し、 v-model フォーム値を双方向でバインドし、 @submit フォーム送信イベントをリッスンします。

上記は、Vue3 で単純な高度な検索コンポーネントを作成する基本的な手順です。実際の状況に応じてコードを調整および拡張できます。

vue3 は高度な検索コンポーネントを作成します

おすすめ