Vue.JS 发出原生 DOM 事件

Question

我有一个自定义的复选框组件，它由一个经典的复选框和一个标签组成。您可以单击复选框或标签来切换状态。

我想发出一个原生的onchange event，所以我可以在一个遥远的 div 祖父母上做一个v-on 监听器。我用于实际复选框的输入正确地发出了原生 onchange 事件，但是当点击标签时我无法手动发出冒泡的原生 onchange 事件。我试过this.$emit('change') 和this.$emit('onchange')，都没有像原生DOM 事件那样冒泡。

这是一个简单的例子：

<!-- Form.vue -->

<div id="form-1" @change="markDirty()">
  <div class="header">
    <CustomButton>Submit</CustomButton>
    <CustomButton>Cancel</CustomButton>
  </div>
  <div class="form-body">
    <div class="form-region">
      <CustomCheckBox :checked.sync='tryChecked'>Try checking me!</CustomCheckBox>
    </div>
  </div>
</div>

<!-- CustomCheckBox.vue -->

<template>
  <div class="custom-checkbox">
    <input type="checkbox" v-on:change="selectCheckbox" />
    <label v-on:click="selectCheckbox">
        <slot></slot>
    </label>
  </div>
</template>

<script>
export default {
    name: 'CustomCheckBox',
    props: {
        checked: {
            type: Boolean,
            required: true
        }
    },
    methods: {
        selectCheckbox() {
            this.$emit('update:checked', !this.checked)
            this.$emit('change')
        }
    }
}
</script>

我希望能够通过onchange 冒泡来判断我的表单中的任何元素何时发生变化，这样我就可以设置一个脏标志。如果我只有原生按钮和复选框，这个例子会很好，因为它们会发出原生 onchange 事件。使用我的CustomCheckBox，当我单击实际的本机复选框时它会冒泡，但标签不会。

这在 Vue 中可行吗？如果没有，使用本机 Javascript 执行此操作的最佳方法是什么？

Answer 1

Vue 发出的事件不会像原生事件那样冒泡。您需要在父组件中直接处理发出的事件或利用状态，如下所示：How to bubble events on a component subcomponent chain with Vue js 2?

您可以在每个后续父组件中使用v-on 处理程序“冒泡”事件，“手动”传递事件，通过bus 使用状态，如上述源中所述或通过vuex。

在这里使用 vanilla js 将不是最佳解决方案，因为您需要直接在祖父组件中设置事件处理程序，这意味着访问在子组件中呈现的 DOM 元素。虽然这是可能的，但它会在组件之间造成相互依赖，因此应尽可能避免。