制作组件实现数据的双向绑定----手机号码

制作的一个简单的输入手机号码的组件，代码如下：

<template>
  <div class="telephone">
    <input type="text" :placeholder="placeholder" v-model="curValue" class="none-bg" @keyup="checkPhone" @blur="checkNum">
  </div>
</template>
<script>
  export default {
    props: {
      value:{
        type:String,
        default: ''
      },
      placeholder: {
        type:String,
        default:''
      }
    },
    data() {
      return {
        curValue:this.value
      };
    },
    methods: {
      checkPhone(){
        let thit = this;
        let phone = this.curValue;
        if(!(/^[0-9]*$/.test(phone))){
          if(phone <= 1){
            phone = '';
          }else{
            phone = '';
          }
        }
        if(phone && phone.length > 11){
          phone = phone.substring(0,11);
          thit.curValue = thit.curValue.substring(0,11);
        }
        this.curValue = phone;
        this.$emit('input',this.curValue);
      },
      //验证手机号码
      checkNum(){
        let thit = this;
        //var reg = /^1[3|4|5|7|8][0-9]{9}$/;
        /*if(this.curValue == ''){
          thit.$alert('请填写手机号码');
        }*/
        if(this.curValue != ''){
          if(!(/^1[3|4|5|7|8][0-9]{9}$/.test(this.curValue))){
            thit.$alert('请填写真确的手机号码');
            this.curValue= '';
            this.$emit('input',this.curValue);
          }
        }
      },
    },
    create(){
    
    },
    mounted () {
      
    },
  }
</script>
<style scoped>
.none-bg{
  background:none;
  border:none;
  height:35px;
  line-height:35px;
}
</style>
功能是实现了，但是遇到一个问题，输入数据后，跳转到下一个页面，再返回上一页数据的时候，其他数据正常展示，只有组件里的不显示，找个半天，发现如果使用v-if控制他的显示，就会发现是正常的，但是还是不能解决问题。最后发现，取值的时候，是放在了

this.$nextTick(() => {});
这个函数中，他会在所有元素加载完成之后执行，这样导致组件加载了没有值，只要放出来，先赋值，再加载元素就好了。