自定义组件中用v-model实现双向数据绑定

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_35958891/article/details/100731103

说明

实现父子组件值双向绑定

要注意的点

子组件中

<template>
  <el-select
    v-model="data_value"
    :remote-method="remoteMethod"
    filterable
    remote
    placeholder="请输入客户名称"
    @change="fContractNumberChange"
  >
    <el-option v-for="item in customerList" :key="item.id" :label="item.fName" :value="item.id"></el-option>
  </el-select>
</template>

<script>
import { customerByNameOrNumber } from "@/api/customer";
export default {
  name: "Customer",
  props: {
    value: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      data_value: null,
      customerList: []
    };
  },
  watch: {
    value(val) {
      this.data_value = val;
    }
  },
  methods: {
    remoteMethod(val) {
      customerByNameOrNumber({ fName: val }).then(res => {
        this.customerList = res;
      });
    },
    fContractNumberChange(val) {
      this.$emit("input", val);
    }
  }
};
</script>

父组件中

<e-customer v-model="query.fCustomerName" />