Vue 3,在变量更改时调用 $emit
Posted
技术标签:
【中文标题】Vue 3,在变量更改时调用 $emit【英文标题】:Vue 3, call $emit on variable change 【发布时间】:2021-06-19 12:53:17 【问题描述】:所以我试图在 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>
【问题讨论】:
【参考方案1】:为了保持组件一致,不要在option和composition api之间混用,setup
钩子的context
参数中可以使用emit
函数::
<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)
...
【讨论】:
我建议setup(props, emit )
,更容易管理。
@Juckix 上下文是设置函数的第二个参数在这里了解更多信息v3.vuejs.org/api/composition-api.html#setup以上是关于Vue 3,在变量更改时调用 $emit的主要内容,如果未能解决你的问题,请参考以下文章
在 vue-multiselect 中测试 vuex 操作时调用了 Jest 预期的模拟函数