尝试从Vue 2中的子发射更新父级

Question

我有一个子组件，它在创建的函数中发出事件

created: function(){
    this.$emit('onPageTitleChange', this.pageTitle);

    this.updateList()
}

我在#app div中有这个（我正在向vue实例发起攻击）：

<h2 class="no-margin-bottom" v-on:onPageTitleChange="updatePageTitle">{{ pageTitle }}</h2>

并且vue应用程序（父应用程序）的upatePageTitle定义为：

methods: {
    updatePageTitle(title){
        this.pageTitle = title;
    }
},

页面标题没有更改-我缺少什么？

Answer 1

这里有两个问题。首先，需要在发出事件的组件的父级中定义侦听器。如果正在使用路由器（如注释中所指出），则可以将侦听器添加到中router-view。

<router-view @on-page-title-change="updatePageTitle"></router-view>

其次，当在DOM中定义模板（即不是字符串或单个文件组件模板）时，则需要注意camelCase vs kebab-case问题。HTML中的属性不区分大小写。我发现最好只是避免曾经发出骆驼事件。既然如此，发出一个烤肉串事件。

this.$emit('on-page-title-change', this.pageTitle);

并如上所示收听。

这是一个工作示例。

<router-view @on-page-title-change="updatePageTitle"></router-view>

this.$emit('on-page-title-change', this.pageTitle);