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

Question

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

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

在父组件中，我在html代码中有一个div元素包含一个v-on，它指的是$emit的userUpdated。

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

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

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

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

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
    }
}