在Vue的Laravel 9中从子组件获得更新值到父组件的问题

Question

我正在使用一个Laravel 9应用程序与Vue 3。我已经创建了一个新的安装。我想要创建一些要在父组件中使用的组件。我要创建的第一个组件是传递一个值(邮政编码)的组件，该组件将格式化并验证传递的值。父组件应该可以访问更新的格式化值。

作为第一步，我使用来自vuejs.org的文档创建了邮政编码组件。

<!-- postalcode.vue -->
<script>
export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  computed: {
    value: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

接下来，我制作了一个示例组件的副本，它与Laravel Vue安装一起创建了一个数据元素"postalcode“，并将其用作v模型，

    <div class="card-body">
        <postal-code-input v-model="postalcode" /> {{ postalcode }}
    </div>
</template>

<script>
    export default {
    data(){
        return {
            postalcode:'l3r3g',
        }
    },
}

当我运行我的应用程序时，它会在输入框中显示初始值(l3r3g)，并在{postalcode}处显示相同的值。但是，当我更新输入框中的值时，它不会更新父组件中的{{postalcode}}。当我检查vue dev工具中的组件时，我看到modelValue和计算出来的'value‘都是未定义的，如下所示

​

​

我只是不知道发生了什么。如果能帮助解决这个问题，我将不胜感激。

Answer 1

我尝试使用watcher而不是computed属性，因为计算的属性产生了缓存，有时它的set()方法在调试reactivity时造成了复杂性。

以下片段适用于我：

// PostalCode.vue

<template>
    <div class="input-group  input-group-merge mb-3">
        <input
            v-model="postalCode"
            type="text" class="form-control"
            id="postal_code" name="postal_code"
        />
    </div>
</template>

<script>
export default {
    name: "PostalCode",

    props: {
        modelValue: String,
    },

    data() {
        return {
            postalCode: null
        }
    },

    watch: {
        // watching prop
        modelValue: {
            handler: function (newValue) {
                if (newValue) {
                    this.postalCode = newValue;
                }
            },
            immediate: true,
        },

       // watching data() property
        postalCode: {
            handler: function (newValue, old) {            
                this.$emit('update:modelValue', newValue)
            },
            immediate: true
        }
    }
}
</script>

用法：

<postal-code v-model="user.postal_code"/>

您也可以将格式化逻辑放置在任何观察者中。

提示/建议：

根据需求，如果您想对道具进行格式化，请按父级更改(对于旧的和新的)，然后将格式设置逻辑放在modelValue观察者中。

注意：

下面的代码片段在Vue3上很好地工作

Answer 2

如果你用v模型来绑定像这样的道具

<postal-code-input v-model="postalcode" /> 

邮政编码组件应该发出“输入”，并有一个值支柱。您可以使用不同的道具和事件，但是您应该避免使用v模型绑定，只需这样做。

<postal-code-input :modelValue="postalcode" @modelValueUpdate=“handleUpdate” />