Vue.JS发出本机DOM事件

Question

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

​

​

我想发出一个本机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元素。虽然这是可能的，但它在组件之间创建了相互依赖，因此应尽可能避免。