Javascript Vue.js事件修饰符的问题

我有以下场景，当下拉列表被更改时，控件将更新数据表。这两种语言的语法都是：

<template id="ux-selector">
     <el-select v-on:change="updateTable()" v-model="option">
         <el-option v-for="option in options" :label="option.Label" :value="option.Value"></el-option>
     </el-select>
</template>

代码将按预期工作，构建我的下拉列表。问题是，当我尝试使用我的Vue代码并使用组件时

var dropdownComponent = Vue.component('date-dropdown', {
     el: '#application-header',
     template: 'ux-selector',
     data: { options: buildDateDropdown() },
     methods: {
         updateTable: function() {
              const month = this.option.selected.value.split('~')[0];
              const year = this.option.selected.value.split('~')[1];

              axios.get('/Home', {
                   params: {
                       Month: month,
                       Year: year
                   }
              }).then(function(response) {
                  this.$.emit('sampleObject', response);
              });
         }
     }
};

var tableComponent = Vue.component('data-table', {
     el: '#application-content',
     template: 'ux-table',
     data: { 
          sampleObject: '' // Not sure how to get emit response to here.
     }
};

var application = new Vue({
    el: '#application',
    components: dropdownComponent, tableComponent
});

---

因此，问题是多管齐下的，什么都没有出现，我如何从

$emit

传递到另一个组件，以重新填充？对这项工作的解释和更正有望对组件之间传递的事件数据有所帮助。

在局部范围内使用全局组件定义似乎有些奇怪。您是否尝试过将

Vue.component

更改为

Vue.extend

或只是删除Vue实例中的

components

字段？@JustinMacArthur嗯，我希望利用可重用方面。但我可能被误解了。我假设一旦这个问题解决了，框架应该使用的方式就会点击。如果您使用

Vue.component

，则无需存储它，因为它连接到全局Vue处理器，并且您放入

的标记将可用于任何安装的Vue实例。我认为，当您同时拥有定义的组件和它所导致的组件数据值时conflict@JustinMacArthur也许，我现在在Vue很烂。希望我买的那本书和其他一些文档能帮助填补空白。坚持下去。我们在科技界都是新手。只需阅读、实验并不断提问。这就是你如何变得更好。

var Application = {
    data() {
      return {
        options: buildDateDropdown()
      }
    }
  };

var Ctor = Vue.extend(Application);
new Ctor().$mount('#ux-selector');

var dropdownComponent = Vue.component('date-dropdown', {
     el: '#application-header',
     template: 'ux-selector',
     data: { options: buildDateDropdown() },
     methods: {
         updateTable: function() {
              const month = this.option.selected.value.split('~')[0];
              const year = this.option.selected.value.split('~')[1];

              axios.get('/Home', {
                   params: {
                       Month: month,
                       Year: year
                   }
              }).then(function(response) {
                  this.$.emit('sampleObject', response);
              });
         }
     }
};

var tableComponent = Vue.component('data-table', {
     el: '#application-content',
     template: 'ux-table',
     data: { 
          sampleObject: '' // Not sure how to get emit response to here.
     }
};

var application = new Vue({
    el: '#application',
    components: dropdownComponent, tableComponent
});