Vue 自定义组件使用 v-model

举一个封装饿了么地址选择组件的例子

<el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
</el-cascader>

这是一个饿了么的地址选择组件(element-china-area-data)，问题在于v-model存储的地址码，后端需要的是地址的字符串，所以需要对这个组件进行封装。

先写好基本结构

<template>
  <div>
    <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
    </el-cascader>
  </div>
</template>

<script>
  import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode
  } from 'element-china-area-data'
  export default {
    name: "AreaData",
    data() {
      return {

        options: regionData,
        selectedOptions: []

      }
    },
    methods: {

      handleChange(value) {
        console.log(value)
      }

    },
    created() {

    },
    computed: {

    },
    props: {

    },

  }
</script>

<style>

</style>

第一步设置model值（文档：cn.vuejs.org/v2/api/#model)

model: {
    prop: 'autoValue',
    event: 'changeAutoValue'
},

prop代表v-model绑定的值，
event代表监听prop中的变化事件并修改

第二步设置created中的初始化

created() {

    this.selectedOptions = this.autoValue;
},

第三步监听子组件的v-model值的变化

watch: {

    selectedOptions(value) {

        this.$emit('changeAutoValue', value)

    }


}

完整代码

<template>
  <div>
    <el-cascader size="large" :options="options" v-model="selectedOptions" @change="handleChange">
    </el-cascader>
  </div>
</template>

<script>
  import {
    provinceAndCityData,
    regionData,
    provinceAndCityDataPlus,
    regionDataPlus,
    CodeToText,
    TextToCode
  } from 'element-china-area-data'
  export default {
    name: "AreaData",
    data() {
      return {

        options: regionData,
        selectedOptions: []

      }
    },
    methods: {

      handleChange(value) {
        console.log(value)
      }


    },
    created() {

      this.selectedOptions = this.autoValue;

    },
    computed: {

    },
    props: {

      autoValue: {
        type: Array,
        default: function() {


          return [];
        }

      }


    },
    model: {

      prop: 'autoValue',
      event: 'changeAutoValue'

    },
    watch: {

      selectedOptions(value) {


        this.$emit('changeAutoValue', value)

      }



    }

  }
</script>

<style>

</style>

调用

<area-data v-model="item.area"></area-data>

其实这个语法等同于

<area-data  :autoValue='item.area' @changeAutoValue='(val)=>{item.area=val}'></area-data>

本作品采用《CC 协议》，转载必须注明作者和本文链接