因此,我尝试在 Vue 3 中构建一个充当表单的组件,为了让父级处理数据,我希望它发出一个包含所有更改输入的对象。我遇到的问题是我似乎无法从 watch()
中调用 $emit
(可能是因为上下文,但我也不知道不明白为什么默认情况下不传递组件范围的上下文,并且它不接受 this
)。由于同样的原因,我也无法调用任何方法。
我确实看到有些人使用 watch: {}
语法,但据我了解,它已被弃用,而且对我来说也没有多大意义。
这是我想要实现的目标的一个最小示例。每当输入日期更改时,我希望组件发出自定义事件。
<template>
<input
v-model="date"
name="dateInput"
type="date"
>
</template>
<script>
import { watch, ref } from "vue";
export default {
name: 'Demo',
props: {
},
emits: ["date-updated"],
setup() {
const date = ref("")
watch([date], (newVal) => {
// $emit is undefined
console.log(newVal);
$emit("date-updated", {newVal})
// watchHandler is undefined
watchHandler(newVal)
})
return {
date
}
},
data() {
return {
}
},
mounted() {
},
methods: {
watchHandler(newVal) {
console.log(newVal);
$emit("date-updated", {newVal})
}
},
}
</script>
最佳答案
不要混合使用选项和组合 API,以保持组件一致,emit
函数在 setup< 的
钩子(Hook)::context
参数中可用
<template>
<input
v-model="date"
name="dateInput"
type="date"
>
</template>
<script>
import { watch, ref } from "vue";
export default {
name: 'Demo',
props: {},
emits: ["date-updated"],
setup(props,context) {// or setup(props,{emit}) then use emit directly
const date = ref("")
watch(date, (newVal) => {
context.emit("date-updated", {newVal})
})
return {
date
}
},
}
</script>
如果你想添加方法watchHandler
,你可以将其定义为一个普通的js函数,例如:
...
watch(date, (newVal) => {
context.emit("date-updated", {newVal})
})
function watchHandler(newVal) {
console.log(newVal);
context.emit("date-updated", {newVal})
}
...
关于javascript - Vue 3,在变量更改时调用 $emit,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66753488/