Vue自定义组件实现v-model指令(实测可以)

1.子组件

<template>
  <div>
    <input type="text" :value="$attrs.value" @input="codeInputChange">
  </div>
</template>

<script>
export default {
  methods:{
    codeInputChange (e) {
      const value = e.target.value
      this.$emit('input', value) // vue2这里一定是input 
    },
  }
}
</script>

2.父组件

<template>
  <div>
    <myInput v-model="myValue"></myInput>
  </div>
</template>

<script>
import myInput from './childComponents.vue'
export default {
  data() {
    return {
      myValue: '' // 这个和子组件的值一样，这个可以随便命名
    }
  },
  components:{
    myInput 
  }
}
</script>