父级函数从未调用子级$ emit之后

Question

我在子组件的axios帖子中添加了一个$ emit，如下所示。

 axios.post('/api/register', qdata)
  .then((response) => {
   this.$emit('userUpdated', response.data)
  })

在父组件中，我在html代码中包含一个v-on的div元素，该元素引用$ emit的userUpdated。

 <div id="username" v-on:userUpdated="nameUpddated($event)">
   <p>{{userid}}</p>
 </div>

最后，父级的脚本部分包含v-on调用的以下函数。

nameUpddated: function (updatedUser) {
  this.userid = updatedUser
}

我已经验证axios在Child组件中返回了正确的值。但是，永远不会调用父函数中的函数。

Answer 1

在父组件中使用子组件名称，而不要使用div。

编辑：我还添加了v-if以有条件地显示该组件。

 <child-component v-if="isVisible" id="username" v-on:userUpdated="nameUpddated($event)">
   <p>{{userid}}</p>
 </child-component>

此外，您需要添加data属性以有条件地显示组件（最初是隐藏的）。

   data () {
        return {
            isVisible: false
        }
    }

现在，由您决定要显示子组件的时间。您只需将isVisible更改为true 。

进行此更改后，它应该可以按预期工作。

---

注意：请记住，在子组件中也要正确注册子组件：

import childComponent from '@/components/childComponent'

export default {
    components: {
        childComponent
    }
}