javascript Vue 3，在变量改变时调用$emit

kse8i1jr 于 2023-05-16 发布在 Java

关注(0)|答案(2)|浏览(115)

因此，我试图在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>

JavaScript

来源：https://stackoverflow.com/questions/66753488/vue-3-call-emit-on-variable-change

2条答案

按热度按时间

2wnc66cl1#

为了保持组件的一致性，不要混合使用option和composition API，emit函数在setup钩子的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})
          }
...

赞(0）回复(0）举报 2023-05-16

eaf3rand2#

我应该如何在设置语法糖做这件事

const emits = defineEmits(['confirmCallBack', 'cancelCallBack', 'closeCallBack', 'openCallBack', 'update:modelValue'])
const dialogForm = ref<CommonForm >({})

watch(dialogForm.value, (val) => {
  consola.start('数据更新')
  emits('update:modelValue', val)
})

赞(0）回复(0）举报 2023-05-16

我来回答

javascript Vue 3，在变量改变时调用$emit

2条答案

相关问题

热门标签

最新问答