如何监听我无法控制的嵌套组件发出的事件？

Question

我想在其"Autocomplete" version 中使用 Vuetify Selects 组件。

然而，我需要做的一件事是查询请求字符串（输入到表单中）。它不是直接可用的，但我在 DevTools（Vue 选项卡）中看到 <v-select> 发出事件 "update:searchInput"，该事件在其有效负载中包含此请求字符串。

我试图在我的组件中监听这个事件（在挂载时：this.$on('update:searchInput', this.querySelections)），但看起来它只是传递给了直接父级而不是上面。

换句话说：我有一个我无法控制的组件，它向其父级（我也无法控制）发出一个事件，我不知道如何在我的组件中拦截它。 这可能吗？

有关信息，示例的代码如下。不过，我认为它并没有那么有用，因为 Vue DevTools 选项卡不可用。它只是表明我可以直接从组件返回的唯一值是a1，这是已经选择的项目（而不是它输入的请求字符串）

new Vue({
  el: '#app',
  data() {
    return {
      a1: null,
      states: [
        'Alabama', 'Alaska', 'American Samoa', 'Arizona',
        'Arkansas', 'California', 'Colorado', 'Connecticut',
        'Delaware', 'District of Columbia', 'Federated States of Micronesia',
        'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho',
        'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
        'Louisiana', 'Maine', 'Marshall Islands', 'Maryland',
        'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
        'Missouri', 'Montana', 'Nebraska', 'Nevada',
        'New Hampshire', 'New Jersey', 'New Mexico', 'New York',
        'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio',
        'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico',
        'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
        'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia',
        'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
      ]
    }
  }
})

<link href="https://unpkg.com/vuetify@0.17.6/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@0.17.6/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-card color="grey lighten-4" flat>
      <v-card-text>
        <v-container fluid>
          <v-layout row wrap>
            <v-flex xs12 sm6>
              <v-subheader v-text="'Autocomplete'"></v-subheader>
            </v-flex>
            <v-flex xs12 sm6>
              <v-select v-bind:items="states" v-model="a1" label="Select" autocomplete></v-select>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card-text>
    </v-card>
  </v-app>
</div>

Answer 1

您可以extend v-select 组件获取总线道具，您可以将update:searchInput 事件转发到该组件上，以便您可以在顶层捕获它。

Vue.component('my-select', {
  extends: Vue.component('v-select'),
  props: ['bus'],
  created() {
    this.$on('update:searchInput', (payload) => this.bus.$emit('update:searchInput', payload));
  }
});

new Vue({
  el: '#app',
  data() {
    return {
      a1: null,
      states: [
        'Alabama', 'Alaska', 'American Samoa', 'Arizona',
        'Arkansas', 'California', 'Colorado', 'Connecticut',
        'Delaware', 'District of Columbia', 'Federated States of Micronesia',
        'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho',
        'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky',
        'Louisiana', 'Maine', 'Marshall Islands', 'Maryland',
        'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi',
        'Missouri', 'Montana', 'Nebraska', 'Nevada',
        'New Hampshire', 'New Jersey', 'New Mexico', 'New York',
        'North Carolina', 'North Dakota', 'Northern Mariana Islands', 'Ohio',
        'Oklahoma', 'Oregon', 'Palau', 'Pennsylvania', 'Puerto Rico',
        'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
        'Texas', 'Utah', 'Vermont', 'Virgin Island', 'Virginia',
        'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
      ],
      bus: new Vue()
    }
  },
  created() {
    this.bus.$on('update:searchInput', (payload) => console.log("Got", payload));
  }
})

<link href="https://unpkg.com/vuetify@0.17.6/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@0.17.6/dist/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-card color="grey lighten-4" flat>
      <v-card-text>
        <v-container fluid>
          <v-layout row wrap>
            <v-flex xs12 sm6>
              <v-subheader v-text="'Autocomplete'"></v-subheader>
            </v-flex>
            <v-flex xs12 sm6>
              <my-select :bus="bus" v-bind:items="states" v-model="a1" label="Select" autocomplete></my-select>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card-text>
    </v-card>
  </v-app>
</div>