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

1、組件 v-model 值經過 props 傳入，必須定義爲 value

 

 

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

 

 

 3、監聽 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>

View Code

4、父組件中使用，只須要添加 v-model 綁定值便可