如何监听不受控嵌套Vuetify组件触发的update:searchInput事件？

嘿，我刚好碰到过类似的困扰！其实不用费劲去拦截组件内部事件，Vuetify的v-select组件（当启用autocomplete时）已经提供了直接绑定搜索输入值的方式，核心是利用它的search-input prop和对应的update:searchInput事件。

问题根源 #

你之前用this.$on('update:searchInput', ...)没效果，是因为update:searchInput是v-select组件直接向它的直接父组件触发的事件，而不是向全局Vue实例广播的。所以你需要在模板里的v-select元素上直接监听这个事件，而不是在Vue实例里用this.$on。

解决方案 #

我们可以通过双向绑定的方式，把v-select内部的搜索输入值同步到我们自己的data变量里：

1. 首先在Vue实例的data中添加一个变量，用来存储搜索输入的内容：

data() {
  return {
    a1: null,
    states: [/* 你的州列表 */],
    searchQuery: '' // 新增这个变量
  }
}

2. 然后修改v-select的模板代码，通过search-input prop和update:searchInput事件实现双向绑定：

<v-select 
  :items="states" 
  v-model="a1" 
  label="Select" 
  autocomplete
  :search-input="searchQuery"
  @update:searchInput="searchQuery = $event"
></v-select>

或者更简洁的，用Vue的.sync修饰符（Vuetify 0.17版本支持这个写法）：

<v-select 
  :items="states" 
  v-model="a1" 
  label="Select" 
  autocomplete
  :search-input.sync="searchQuery"
></v-select>

3. 现在你就可以在组件里直接使用searchQuery变量了，它会实时同步用户在v-select输入框里输入的内容。比如可以在模板里添加一行来测试：

<p>当前搜索输入: {{ searchQuery }}</p>

修改后的完整示例 #

new Vue({
  el: '#app',
  data() {
    return {
      a1: null,
      searchQuery: '',
      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>
              <p>当前搜索输入: {{ searchQuery }}</p>
            </v-flex>
            <v-flex xs12 sm6>
              <v-select 
                :items="states" 
                v-model="a1" 
                label="Select" 
                autocomplete
                :search-input.sync="searchQuery"
              ></v-select>
            </v-flex>
          </v-layout>
        </v-container>
      </v-card-text>
    </v-card>
  </v-app>
</div>

原理说明 #

Vuetify的v-select组件在启用autocomplete时，会维护一个内部的搜索输入值，并通过search-input prop接收外部传入的值，同时在输入变化时触发update:searchInput事件通知父组件更新。这种模式是Vue中实现父子组件状态双向同步的标准方式，比试图拦截内部事件要可靠得多。

内容的提问来源于stack exchange，提问作者WoJ