vue项目中父子组件在调用方法的时候出现undefined

1. 首先定义子组件并引用子组件

2. 通过`this.$refs`调用子组件的方法，假设是init方法

 3. 页面出现报错init方法未定义的异常

        由于子组件没有在页面初始化时加载，而是在点击某个特定的按钮后才开始显示加载，所以出现未定义异常.

解决方案：

1. 使用vue中this.$nextTick()

定义：nextTick()，是将回调函数延迟在下一次dom更新数据后调用；

nextTick应用场景：
        1、Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。

  created(){
    let that=this;
    that.$nextTick(function(){  //不使用this.$nextTick()方法会报错
        that.$refs.aa.innerHTML="created中更改了按钮内容";  //写入到DOM元素
    });
  },

vue改变dom元素结构后使用vue.$nextTick()方法来实现dom数据更新后延迟执行后续代码

    changeTxt:function(){
      let that=this;
      that.testMsg="修改后的文本值";  //修改dom结构
       
      that.$nextTick(function(){  //使用vue.$nextTick()方法可以dom数据更新后延迟执行
        let domTxt=document.getElementById('h').innerText; 
        console.log(domTxt);  //输出可以看到vue数据修改后并没有DOM没有立即更新，
        if(domTxt==="原始值"){
          console.log("文本data被修改后dom内容没立即更新");
        }else {
          console.log("文本data被修改后dom内容被马上更新了");
        }
      });
    },

2. 可以使用setTimeout

setTimeout()方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。