用el-select封装自己的组件

Question

用el-select封装一个带数据的 select 然后在父组件 直接 v-model
这样的组件咋封装
我尝试了好几个方法 都不行

<template>
  <el-select v-model="currentVal" placeholder="请选择">
    <el-option
      v-for="item in initiateModeList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'InitiateSelect',
  model: {
    prop: 'currentVal',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    },
    currentVal: {
      type: String,
      default: '0'
    }
  },
  data() {
    return {
      // currentValue: '0'
    }
  },
  computed: {
    ...mapGetters(['initiateModeList'])
  },
  methods: {
    // onChange(val) {
    //   this.$emit('change', val)
    // }
  }
}
</script>

<style scoped>

</style>

这样的代码 在 父组件 用v-model 无法实现数据响应式了
同理 el-input也不行 不知道哪里错了

Answer 1

规范上props只能由父组件修改，这一点 @juststart_LIC 说的很对，所以需要另定义一个data属性进行值绑定。

<template>
  <el-select v-model="currentValue" placeholder="请选择">
    <el-option
      v-for="item in initiateModeList"
      :key="item.value"
      :label="item.label"
      :value="item.value"
    />
  </el-select>
</template>

<script>
//import { mapGetters } from 'vuex'
import Vue from 'vue';

export default {
  name: 'InitiateSelect',
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      currentValue: this.value
    }
  },
  watch(){
    currentValue(newVal, oldVal){
      this.$emit('input', newVal);
    }
  },
  computed: {
    //...mapGetters(['initiateModeList'])
  },
  methods: {
  }
}
</script>

<style scoped>

</style>

Answer 2

用watch监听一下看看，好像你这样子也是不规范的吧，prop传进来的值不应该直接修改吧，应该重新在data里赋值

data(){
  return{
     newCurrentVal:'',  
  }
}
watch:{
  currentVal:{
      handler(newVal,oldVal){
         this.newCurrentVal=newVal
      }
      deep:true
  }
}