vue textarea文本域限制字数组件化

父组件引用代码

<Htextarea :total='form.intro' @text="Atext"></Htextarea>

子组件代码

<template>
     <div>
        <textarea maxlength="200" v-model="text"></textarea>
        <div>
            <span v-html="text.length"></span>/200字
        </div>
     </div>
</template>
<script>
    export default {
      props: ["total"],
        data() {
            return {
               text:this.total,
            }
      },
      watch: {
        total(val) {
            this.text = val;//新增total的watch，监听变更并同步到text上
        },
        text(newval,oldval) {
          if(this.text.length>200){
            this.text=oldval;
          }
          this.test();
        },
      },
      methods:{
        test(){
         
          this.$emit('text',this.text);
        },
      }
    }
</script>