typescript - Vue 3.0 中的事件处理更改？

Question

我需要在子组件中处理一个事件；检查特定条件；如果为真，则将“提交”事件发回父级，以便它的事件处理程序运行。

以下示例使用 Vue.js 2.6.11(将“vue”替换为“@vue/composition-api”)触发一次父事件处理程序。对于 3.0.0-rc.5，它会触发两次。想知道这是有意更改、错误还是我。

App.vue:

<template lang="pug">
#app
  .container
    h1 Form Experiment
    FormGroup(@submit='onSubmit')
      button.btn.btn-primary(type='submit') Submit
</template>

<script lang="ts">
import { defineComponent } from "vue"
import FormGroup from "@/components/FormGroup.vue"

export default defineComponent({
  name: "App",
  components: {
    FormGroup,
  },
  setup() {
    const onSubmit = (): void => {
      alert("Parent event handler")
    }
    return { onSubmit }
  }
})
</script>

FormGroup.vue:

<template lang="pug">
form(@submit.prevent='onFormSubmit', novalidate, autocomplete='on')
  slot Content needed in FormGroup
</template>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  name: "FormGroup",
  setup(_, { emit }) {
    const check = ref(true) // evaluated elsewhere - simplified for this example
    const onFormSubmit = (): void => {
      if (check.value) {
        alert("Form is valid - sending event to parent")
        emit("submit")
      } else {
        alert("Form is not valid.") // so don't emit the event to parent
      }
    }

    return { check, onFormSubmit }
  }
})
</script>

关于为什么父级中的 onSubmit() 在 Vue.js 3.0.0-rc.5 中触发两次有什么想法吗？

Answer 1

看起来它是为 Vue 3 而设计的

inheritAttrs

Type: boolean

Default: true

Details:

By default, parent scope attribute bindings that are not recognized asprops will "fallthrough". This means that when we have a single-rootcomponent, these bindings will be applied to the root element of thechild component as normal HTML attributes. When authoring a componentthat wraps a target element or another component, this may not alwaysbe the desired behavior. By setting inheritAttrs to false, thisdefault behavior can be disabled. The attributes are available via the$attrs instance property and can be explicitly bound to a non-rootelement using v-bind.

Note: this option does not affect class and style bindings.

文档:https://v3.vuejs.org/api/options-misc.html#inheritattrs

应该有效(添加了 inheritAttrs: false):

<template lang="pug">
form(@submit.prevent='onFormSubmit', novalidate, autocomplete='on')
  slot Content needed in FormGroup
</template>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  name: "FormGroup",
  inheritAttrs: false,
  setup(_, { emit }) {
    const check = ref(true) // evaluated elsewhere - simplified for this example
    const onFormSubmit = (): void => {
      if (check.value) {
        alert("Form is valid - sending event to parent")
        emit("submit")
      } else {
        alert("Form is not valid.") // so don't emit the event to parent
      }
    }

    return { check, onFormSubmit }
  }
})
</script>

const {
  defineComponent,
  createApp,
  ref,
} = Vue

const FormGroupFactory = (name, inheritAttrs) => defineComponent({
  name,
  inheritAttrs,
  setup(_, {
    emit
  }) {
    const onFormSubmit = () => {
      emit("evt", "@EVT")
      emit("submit", "@SUBMIT")
    }
    return {
      onFormSubmit
    }
  },
  template: document.getElementById("FormGroup").innerHTML
})


createApp({
    el: '#app',
    components: {
      FormGroupOne: FormGroupFactory('FormGroupOne', true),
      FormGroupTwo: FormGroupFactory('FormGroupTwo', false),
    },
    setup() {
      const log = ref('');
      const onSubmit = (e) => {
        log.value = log.value + "Parent event handler" + e + "\n"
      }
      return {
        log,
        onSubmit
      }

    }
  })
  .mount('#app')

<script src="https://unpkg.com/vue@3.0.0-rc.5/dist/vue.global.js"></script>

<div id="app">
  <div class="container">
    <form-group-one @submit="onSubmit"><button class="btn btn-primary" type="submit">Submit</button> inheritAttrs: true</form-group-one>
    <form-group-two @submit="onSubmit"><button class="btn btn-primary" type="submit">Submit</button> inheritAttrs: false</form-group-two>
  </div>
  <pre>{{log}}</pre>
</div>

<template id="FormGroup">
  <form @submit.prevent="onFormSubmit" novalidate="novalidate" autocomplete="on">
    <slot>Content needed in FormGroup</slot>
  </form>
</template>