vue 组件的V-MODEL

不玩虚的，直接上代码

<template>
  <div class="vic-select">
    <el-select v-model="val" placeholder="请选择" @change="handleChange">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
        <span style="float: left">{{ item.label }}</span>
        <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
      </el-option>
    </el-select>
  </div>
</template>

<script>
export default {
  name: "VicSelect",
  components: {},
  model: {
    prop: "value",
    event: "aabb",//监听的事件
  },
  props: {
    value: {
      type: String,
      default: "",
    },
    parent: {
      type: Object,
      default: function () {
        return {};
      },
    },
    api: {
      type: String,
      default: "",
    },
    dataList: {
      type: Array,
      default: function () {
        return [];
      },
    },
    valise: {
      type: Object,
      default: function () {
        return {
          label: "label",
          value: "value",
        };
      },
    },
  },
  
  data() {
    return {
      options: this.dataList,
      val: this.value,
    };
  },
  methods: {
    handleChange(val) {
      console.log(val);
      this.$emit('aabb', val)
    },
  },
};
</script>
<style scoped>
</style>

父

<template>
  <div class="home">
    vic-select:=>{{selectVal}}
    <vic-select 
      v-model="selectVal"
      :dataList="selectData"
      
    ></vic-select>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {},
  data(){
    return {
      selectVal:"",
      selectData:[{
          value: 'Beijing',
          label: '北京'
        }, {
          value: 'Shanghai',
          label: '上海'
        }, {
          value: 'Nanjing',
          label: '南京'
        }, {
          value: 'Chengdu',
          label: '成都'
        }, {
          value: 'Shenzhen',
          label: '深圳'
        }, {
          value: 'Guangzhou',
          label: '广州'
        }]
    }
  }
};
</script>

 

注意

1 注册的v-model，在子组件中要用model属性增加一下。

2 this.$emit('aabb', val) aabb是你的事件名，也相当于子传父时的自定义事件

model: {

    prop: "value",

    event: "aabb", //调用时要用 this.$emit('aabb', val)

  }

其余的，自己看看官网

最后，v-model在组件上应用时，一般传个字符串传，当然，类型你自己定义，传个object也是可以的。看业务需求了。不过，要写多个自定义方法时，还是要自己写的。