如何使用$this.nextTick()实现子组件渲染后向父组件emit事件

你的代码有两个直接导致逻辑不生效的写法错误，和一个场景覆盖不全的问题：

• 父组件模板的v-bind、v-on指令属性值没有加引号，且驼峰命名的prop在DOM模板中没有转成短横线格式，导致booleanValue这个prop根本没有正确传递到子组件，子组件内this.booleanValue始终为undefined，if判断永远不成立，看起来就像nextTick没有执行
• 子组件mounted里注册的$nextTick回调只会在子组件首次挂载完成后执行1次，如果父组件的booleanValue是在子组件挂载完成之后才异步改成true（比如接口返回后赋值、点击按钮后赋值），回调执行时判断条件不成立，后续值更新也不会重新触发这个回调
• 你贴的子组件代码末尾多写了一个多余的闭合大括号，如果你本地代码也有这个问题会直接报语法错，你说语法无报错应该是贴代码时的手误

1. 先修复父组件的模板绑定错误，给指令值加引号，驼峰prop转短横线：

<!-- 注意v-bind和v-on的属性值都用双引号包裹，驼峰prop转成短横线格式 -->
<child-component 
    v-on:event-name="eventMethod"
    v-bind:boolean-value="booleanValue">
</child-component>

模板里的表达式默认就是当前组件实例的作用域，直接写booleanValue即可，不需要额外加this.

2. 如果你的booleanValue是子组件挂载前就已经确定为true的固定值，改完上面的模板代码逻辑就可以正常运行：子组件首次挂载完成、DOM渲染结束后会触发$nextTick回调，判断值为真就弹出提示、给父组件发事件。

3. 如果你的booleanValue是异步更新的值（比如初始为false，后续某个操作后才变成true），只需要在子组件里加一段和mounted逻辑完全一致的监听即可，写法和你已经会的mounted、nextTick逻辑没有区别，不需要学新的概念：

mounted() {
  this.$nextTick(()=>{
    if (this.booleanValue){
      alert('You got it!')
      this.$emit('event-name');
    }
  })
},
// 监听booleanValue的变化，值更新、DOM重新渲染完成后再执行判断
watch: {
  booleanValue(newVal) {
    this.$nextTick(() => {
      if (newVal) {
        alert('You got it!')
        this.$emit('event-name');
      }
    })
  }
}

• 这里的watch只是帮你捕获prop值的变化，内部执行逻辑和你原来写的nextTick、判断、发事件完全一致，没有引入新的实现逻辑，不会增加你的理解成本。

内容的提问来源于stack exchange，提问作者Eshmam