更新槽子组件时未更新父变量

问题描述

我正在尝试为我的页面创建一些自定义表单字段，但我了解到我不能使用 props 来这样做，所以我试图找到一种方法来在我使用我的子组件时更新我的​​父组件变量。当我检查父变量时，它始终为空。

这是我的组件：

<template>
    <input
        v-model="value"
        :placeholder="placeHolder"
        class="form-field"
    >
</template>
<script>
export default {
    props: ['placeHolder'],data() {
      return {
          value: ''
      }
    },methods: {
        updateValue(){
            this.$emit("update-text",this.value);
        }
    },watch: {
        value: function(){
            this.updateValue
        }
    }
}
</script>

这就是我使用组件的方式：

<TextField placeholder="Nome" :update-text="name = value"/>

我到底做错了什么？ 我正在使用 vue.js 和 nuxt.js

解决方法

我认为在这种情况下，更简单的方法可能是从您的自定义文本字段发出 input 事件，并使用 v-model 将组件绑定到变量。

TextField.vue

<template>
    <input
        @input="$emit('input',$event.target.value)"
        :placeholder="placeHolder"
        class="form-field"
    >
</template>
<script>
export default {
    props: ['placeHolder']
}
</script>

使用

<template>
    <TextField placeholder="Nome" v-model="name"/>
</template>

<script>
export default {
    data: () => ({
        name: '',}),}
</script>

阅读有关在自定义组件 here 上使用 v-model 的更多信息。