element input 封裝;避免雙向數據流

子組件

其實element的@input 並非原生的input 

而是基於原生已封裝好的值

<template>
  <div>
    <el-input :value="localValue" @input="test" size="small"></el-input>
    <div class="tag">輸入多個標籤時，請使用英文；區分，最多輸入5個標籤</div>
  </div>
</template>

<script>
  export default {
    // model: {
    //   prop: "value",
    //   event: "input"
    // },
    props: ["value"],

    data() {
      return {}
    },
    computed: {
      localValue() {
        return this.value
      }
    },
    mounted() {

    },
    methods: {

      test(a) {
        console.log(a);
        this.$emit("input", a)
      }
    }
  }
</script>

<style scoped lang='scss'>
  .tag {
    font-size: 12px;
    color: red;
  }
</style>

父組件

<tag v-model=questionDTO.tagStr id="tag"></tag>

另外能夠參考這篇博文: https://www.cnblogs.com/mark5/p/11603428.html

還有基於餓了麼的select封裝