Vue 組件實現數據雙向綁定（el-select 封裝）

一、組件 v-model 值通過 props 傳入，必須定義為 value

 

 

 二、將傳入的 value 在 data 中重新定義賦值，以便子組件改變值（子組件中不能直接修改 props 中的值）

 

 

 三、監聽 value：使 value 能在初始化時有值，監聽 data（svalue）：使子組件修改值通知給父組件同步（重要）

 

 自用封裝中 el-select 組件代碼

<template>
  <el-select
    :clearable="sClearable"
    :disabled="sDisabled"
    :class="sClass"
    v-model="svalue"
    sPlaceholder="全部"
    @change="sChange"
  >
    <el-option
      v-for="item in options"
      :key="item[keys?keys:option]"
      :label="item[label]"
      :value="item[option]"
    ></el-option>
  </el-select>
</template>

<script>
export default {
  props: {
    value: {
      type: [String, Number],
      required: true
    },
    options: {
      type: Array,
      required: true
    },
    keys: {
      type: String,
      default: ""
    },
    label: {
      type: String,
      default: "Text"
    },
    option: {
      type: String,
      default: "Value"
    },
    sClass: {
      type: String,
      default: "querySelect"
    },
    sClearable: {
      type: Boolean,
      default: true
    },
    sPlaceholder: {
      type: String,
      default: "全部"
    },
    sDisabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      svalue: this.value
    };
  },
  methods: {
    sChange() {
      this.$emit("sChange");
    }
  },
  watch: {
    value(newVal) {
      this.svalue = newVal;
    },
    svalue(newVal, oldVal) {
      if (newVal !== oldVal) {
        this.$emit("input", this.svalue);
      }
    }
  }
};
</script>

四、父組件中使用，只需要添加 v-model 綁定值即可