自定义组件的 v-model

官方地址：https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
 

// 子组件
<template>
  <el-select v-model="saveDataType" placeholder="行业" class="video-type" @change="$emit('dataTypeChange', saveDataType)">
    <el-option label="全部" value=""></el-option>
    <el-option v-for="item in industrySelectList" :key="item.description" :value="item.description" :label="item.description"></el-option>
  </el-select>
</template>

<script>
export default {
  name: 'userGroupSelect',
  props: {
    DataType: {
      type: String
    }
  },
  model: {
    prop: 'DataType',
    event: 'dataTypeChange'
  },
  data() {
    return {
      saveDataType: this.DataType,
      industrySelectList: []
    }
  }
</script>


// 父组件
<industry v-model="subParams.domainNames"/>

 

<template>
  <el-select v-model="selectedIndustry" multiple placeholder="行业" class="video-type" @change="handleChange">
    <el-option label="全部" value=""></el-option>
    <el-option v-for="item in industrySelectList" :key="item.description" :value="item.description" :label="item.description"></el-option>
  </el-select>
</template>

<script>
export default {
  methods: {
    handleChange(val) {
      if(this.selectedIndustry && this.selectedIndustry.length > 0) {
        let current = this.selectedIndustry[this.selectedIndustry.length - 1]
        if(current === '') {
          this.selectedIndustry = ['']
          this.$emit('input', [])
        } else {
          this.selectedIndustry = this.selectedIndustry.filter(item => item !== '')
          this.$emit('input', this.selectedIndustry)
        }
      } else {
        this.$emit('input', [])
      }
    }
  }
}
</script>

第一种  设置 props  和 model
第二种  用 this.$emit('input', name)   实现v-model绑定