vue如何自我封装一个 textarea 实现 v-model

Question

想实现一个这样的功能 textarea 下面永远跟上和 textarea 相同的文字

parent.vue
<my-textarea v-model="desc"></my-textarea>
export default{
     data(){
        return {
            desc:'描述'
        }
     }
}

mytextarea.vue
<template>
    <textarea @input="input" :value="value"></textarea>
    <span>{{value}}</span>
</template>
export default{
   props: {
        value: {
          default: ""
        },
    },
    methods:{
        input(){
            this.$emit('input',event.target.value)
        }
    }
}

实现方式大概是这样,但是发现 span 中的 value 并不会变化....请教大佬们有什么好的方案!!!

Answer 1

mytextarea中的value值没有传到parent里面去，建议参考官方文档，父子组件传值

Answer 2

parent.vue
<my-textarea v-model="desc" :parent-value.sync="desc"></my-textarea>
export default{
     data(){
        return {
            desc:'描述'
        }
     }
}

mytextarea.vue
<template>
    <textarea @input="input" :value="value"></textarea>
    <span>{{value}}</span>
</template>
export default{
   data() {
       return {
            value: this.parentValue
       };
   },
   props: {
        parentValue: {
          default: ""
        },
    },
    methods:{
        input(){
            this.$emit('update:parentValue',this.value)
        }
    }
}

Answer 3

你要在vue的基础上实现v-model？Object.defineProperty了解一下。

Answer 4

如官方描述：

<template>
  <textarea placeholder="请输入" @input="inputHandler">{{ value }}</textarea>
</template>
<script>
export default {
  name: 'MyTextarea',
  components: {},
  //model语法糖默认value和input，可不写
  //model: {
  //  prop: 'value',
  //  event: 'input'
  //},
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },
  methods: {
    inputHandler($event) {
      this.$emit('input', $event.target.value)
    }
  }
}
</script>