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 & Jest。子组件发出事件时调用测试方法

[Vue]组件——通过$emit自定义组件事件

vue 子父组件相互调用的方法 2018-11-09

在 vue-multiselect 中测试 vuex 操作时调用了 Jest 预期的模拟函数

vue关于this.$refs.tabs.refreshs()刷新组件,缓存

如何测试在悬停/鼠标悬停时调用了 Vue 指令?