Vue 3.0中的事件处理更改？
Vue 3.0中的事件处理更改？
提问于 2020-08-10 13:20:37
我需要处理子组件中的事件；检查某个条件；如果为真，则将"submit“事件发回父组件，这样它的事件处理程序就会运行。
下面的示例使用Vue.js 2.6.11激发父级事件处理程序(将"vue“替换为”@vue/复合-api“)。对于3.0.0-rc.5，它会触发两次。想知道这是一个有意的改变，一个bug，还是我。
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中触发两次有什么想法吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-10 19:10:27
看起来这是Vue 3中的意思
inheritAttrs
类型:布尔型
默认值: true
详细信息：
默认情况下，不能识别为道具的父范围属性绑定将“失败”。这意味着，当我们有一个单一根组件时，这些绑定将作为普通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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63341063
复制相关文章
相似问题
腾讯云开发者
