尝试在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与kebab-case问题。 Attributes in HTML are case-insensitive。我发现最好只是避免发射camelCased事件。在这种情况下，发出一个烤肉串的事件。

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

听听如上所示。

这是一个有效的例子。

＆＃13;

＆＃13;

console.clear()

const Foo = { 
  template: '<div>foo</div>',
  created() {
    this.$emit("on-page-title-change", "This is the Foo title")
  }
}
const Bar = { template: '<div>bar</div>' }

const routes = [
  { path: '/', component: Foo },
  { path: '/bar', component: Bar }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})



new Vue({
  el: "#app",
  router,
  data:{
    pageTitle: "This is the original title"
  },
  methods: {
    updatePageTitle(title){
      this.pageTitle = title;
    }
  },
})

＆＃13;

<script src="https://unpkg.com/vue@2.4.2"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/3.0.1/vue-router.js"></script>

<div id="app">
  <h2>{{pageTitle}}</h2>
  <router-view @on-page-title-change="updatePageTitle"></router-view>
</div>

＆＃13;

＆＃13;

＆＃13;