2

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

下面的示例使用 Vue.js 2.6.11 触发父级的事件处理程序（将“vue”替换为“@vue/composition-api”）。使用 3.0.0-rc.5，它会触发两次。想知道这是故意的更改，错误还是我。

应用程序.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 中触发两次的任何想法？

4

1 回答 1

4

看起来它是在 Vue 3 中使用的

继承属性

类型：布尔值

默认值：真

细节：

默认情况下，未被识别为道具的父范围属性绑定将“失败”。这意味着当我们有一个单根组件时，这些绑定将作为普通 HTML 属性应用于子组件的根元素。在创作包装目标元素或另一个组件的组件时，这可能并不总是期望的行为。通过将 inheritAttrs 设置为 false，可以禁用此默认行为。这些属性可通过 $attrs 实例属性获得，并且可以使用 v-bind 显式绑定到非根元素。

注意：此选项不影响类和样式绑定。

文档：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>

于 2020-08-10T19:10:27.213 回答