时间戳

首页 > 解决方案 > Vue 3 - 子组件的双向数据绑定没有问题

typescript - Vue 3 - 子组件的双向数据绑定没有问题

问题描述

我无法让双向数据绑定在 Vue 3 中在父组件及其子组件（一种表单）之间工作。

父.vue

<template>
  <h5>{{ record.title }}</h5>
  <ChildForm v-model:record="record"></ChildForm>
</template>

<script lang="ts">
export default {
  data() {
    record: undefined
  },
  created() {
    //code to fetch record
    this.$data.record = new Record(responseJson);
  },
  watch: {
    record: function(newRecord, oldRecord) {
      alert("change detected!");
      //perform appropriate logic when record is changed in child
    }
  }
}
</script>

孩子.vue

<template>
  <InputText v-model="record.title"></InputText>
  <InputText v-model="record.description"></InputText>
</template>

<script lang="ts">
export default {
  props: {
    record: {
      type: Object as () => RecordModel
    }
  },
  emits: ["update:record"]
}

如果我在 ChildForm 的标题输入框中更改标题，则父级准确地反映了 h5 表头中的更改。但是，watch 函数永远不会被触发。

当孩子更改模型对象的值时，我该怎么做才能触发父母的 watch 方法？

标签： typescriptvue.js

解决方案

几点注意事项：

  1. 您正在直接修改道具，这是不受欢迎的，并且在技术上从不发射update:record，因此 v-model 本质上是无用的。如果您正在发射，那么手表会按照您的预期触发。如果您想了解如何执行此操作的示例，请参阅显示 vue2 的 jist 的答案，您只需修改它以使用新的update:prop事件名称。

  2. 如果您想继续直接修改道具，那么您根本不需要v-model:record。只需使用:record="record"并使观察者深入

watch: {
    record: {
        handler(newRecord, oldRecord) {
            alert("change detected!");
        },
        deep: true
    }
}

推荐阅读