Vue跨实例中select的addEventListener不触发问题求解

我帮你梳理下问题的核心原因，以及不用全局事件就能解决的办法：

核心问题 #

你遇到的情况主要有两个关键点：

1. 元素监听时机错误：你的appControl实例先于.vue-instance的Vue实例创建，当appControl执行mounted钩子时，#sampleSelect还没被Vue渲染出来，导致document.querySelector("#sampleSelect")返回null，根本没加上监听事件。
2. 手动触发的事件缺少冒泡特性：原生change事件默认是会冒泡的，但你用new Event('change')创建的事件，默认bubbles属性为false，即便元素存在，这个事件也无法被外部监听器正常捕获。

解决方案 #

针对这两个问题，我们可以通过以下两种方式调整：

方式一：调整实例创建顺序 + 修复事件冒泡 #

把.vue-instance的Vue实例创建代码放在appControl之前，确保元素渲染完成后再添加监听；同时修改组件内的事件触发逻辑，开启冒泡特性。

修改后的完整代码：

<div id="appControl"> </div>
<div class="vue-instance">
  <form-select inline-template>
    <div>
      <select name="color" id="sampleSelect" @change="handleSelectChange" ref="htmlSelect">
        <option value="">--select--</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="yellow">Yellow</option>
      </select>
      <p>Change select</p>
      <div class="buttons-wrapper">
        <button @click="setSelect('blue')">Blue</button>
        <button @click="setSelect('green')">Green</button>
        <button @click="setSelect('yellow')">Yellow</button>
      </div>
    </div>
  </form-select>
</div>

<script>
Vue.component('form-select', {
  methods: {
    handleSelectChange: function(e){
      console.log('Component handleSelectChange', e.target.value);
    },
    setSelect: function(val) {
      this.$refs.htmlSelect.value = val;
      // 创建带冒泡特性的change事件，贴合原生行为
      this.$refs.htmlSelect.dispatchEvent(new Event('change', { bubbles: true }));
    },
  }
});

// 先渲染.vue-instance内的组件，确保select元素存在
var vueInstances = document.querySelectorAll('.vue-instance');
vueInstances.forEach(function(vueInstance) {
  new Vue({ el: vueInstance })
})

// 再创建appControl实例，此时能正常获取到select元素
var appControl = new Vue({
  el: "#appControl",
  mounted: function(){
    var selectField = document.querySelector("#sampleSelect");
    selectField.addEventListener('change', this.handleDomSelectChange);
  },
  methods: {
    handleDomSelectChange: function(e){
      console.log('appControl handle select change', e.target.value);
    }
  }
})
</script>

方式二：事件委托（更稳妥） #

如果你不想调整实例创建顺序，可以用事件委托监听一个始终存在的父元素（比如document），这样不管元素什么时候渲染，都能捕获到它的change事件。

只需要修改appControl的mounted钩子：

mounted: function(){
  // 监听document的change事件，通过目标元素ID判断是否是我们要监听的select
  document.addEventListener('change', (e) => {
    if (e.target.id === 'sampleSelect') {
      this.handleDomSelectChange(e);
    }
  });
},

同时保持组件内dispatchEvent的冒泡设置，这样不管是直接下拉选择，还是点击按钮设置值，控制台都会输出你预期的两行日志。

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