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封装

来源：oschina

链接：https://my.oschina.net/u/4004801/blog/4760216