二次封装element select，通过computed计算属性解决v-model父子组件传递值问题

背景

项目中需要编写一个全局组件，继承element select，二次封装element select，不用重复去写封装组件数据的代码。这里面遇到了父子组件传递值不成功的问题，通过computed计算属性解决。

知识点

v-bind=“$props”:

可以将父组件的所有props下发给它的子组件,子组件需要在其props:{} 中定义要接受的props和size。

​v-model

你可以用 v-model 指令在表单 、 及 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值

v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

v-model和v-bind的区别

v-model提供了双向数据绑定，v-bind只以一种方式绑定数据。

子组件向父组件共享数据

Computed的getter和setter方法

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
// ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

运行 vm.fullName = ‘John Doe’ 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

二次封装的el-select组件代码

<template>
  <el-select placeholder="请选择供应商" clearable v-model="supplier">
      <el-option
            v-for="supplier in wmsSupplierList"
            :key="supplier.id"
            :label="supplier.supplierName"
            :value="supplier.id"
          ></el-option>
  </el-select>
</template>
<script>
import { listWmsSupplier} from '@/api/wms/supplier'
export default {
  props: ['value','size'],
  data() {
    return {
      wmsSupplierList: [],
    }
  },
  computed: {
    supplier: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit('input', v);
      }
    }
  },
  created() {
    this.getSupplierList();
  },
  methods: {
    getSupplierList(){
      listWmsSupplier({},{page:0,size:1000}).then(response => {
        const { content } = response
        this.wmsSupplierList = content;
      });
    },
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

在main.js中注册全局组件

import WmsSupplierSelect from '@/components/WmsSupplierSelect'
Vue.component('WmsSupplierSelect',WmsSupplierSelect)


//调用的地方使用即可
<WmsSupplierSelect v-model="queryParams.supplierId" size="small"/>
1
2
3
4
5
6