Vue 组件实现数据双向绑定（el

一、组件 v-model 值通过 props 传入，必须定义为 value

二、将传入的 value 在 data 中重新定义赋值，以便子组件改变值（子组件中不能直接修改 props 中的值）

三、监听 value：使 value 能在初始化时有值，监听 data（svalue）：使子组件修改值通知给父组件同步（重要）

自用封装中 el-select 组件代码

1<template>
2  <el-select
3    :clearable="sClearable"
4    :disabled="sDisabled"
5    :class="sClass"
6    v-model="svalue"
7    sPlaceholder="全部"
8    @change="sChange"
9  >
10    <el-option
11      v-for="item in options"
12      :key="item[keys?keys:option]"
13      :label="item[label]"
14      :value="item[option]"
15    ></el-option>
16  </el-select>
17</template>
18
19<script>
20export default {
21  props: {
22    value: {
23      type: [String, Number],
24      required: true
25    },
26    options: {
27      type: Array,
28      required: true
29    },
30    keys: {
31      type: String,
32      default: ""
33    },
34    label: {
35      type: String,
36      default: "Text"
37    },
38    option: {
39      type: String,
40      default: "Value"
41    },
42    sClass: {
43      type: String,
44      default: "querySelect"
45    },
46    sClearable: {
47      type: Boolean,
48      default: true
49    },
50    sPlaceholder: {
51      type: String,
52      default: "全部"
53    },
54    sDisabled: {
55      type: Boolean,
56      default: false
57    }
58  },
59  data() {
60    return {
61      svalue: this.value
62    };
63  },
64  methods: {
65    sChange() {
66      this.$emit("sChange");
67    }
68  },
69  watch: {
70    value(newVal) {
71      this.svalue = newVal;
72    },
73    svalue(newVal, oldVal) {
74      if (newVal !== oldVal) {
75        this.$emit("input", this.svalue);
76      }
77    }
78  }
79};
80</script>

View Code

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