Vue.js 更新的属性不会在子组件上更改

Question

我有一个子组件，它是一个 HTML 输入元素。它看起来像这样：

<label-input inputId="formProductId"
             inputType="number"
             inputName="productId"
             :inputEnabled="filters.productId.options"
             :label="translations['product_id']"
             :placeholder="translations['product_id']"
             :data="filters.productId.value"
/>

LabelInput.vue 文件：

<template>
    <div class="form-element">
        <label :for="inputId" :class="['form-element-title', { 'js-focused': focused }]">{{ label }}</label>
        <input @input="updateValue($event.target.value)" :type="inputType" :id="inputId" :name="inputEnabled ? inputName : false" v-model="inputData" :placeholder="placeholder" @focus="focused = true" @blur="focused = false">
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component
export default class LabelInput extends Vue {
    @Prop({ default: () => '' }) inputId!: string
    @Prop({ default: () => '' }) inputType!: string
    @Prop({ default: () => '' }) inputName!: string
    @Prop({ default: () => '' }) label!: string
    @Prop({ default: () => '' }) placeholder!: string
    @Prop({ default: () => {} }) data!: []
    @Prop({ default: () => true }) inputEnabled!: string

    private inputData = this.data
    private focused = false

    updateValue (value: string) {
        this.$root.$emit('input', {'inputName' : this.inputName, 'inputValue' : value});
    }
}

所以模型通过filters.productId.value作为数据传递，然后变成局部变量inputData。

现在，如果我更改输入值，我会使用 updateValue 函数，该函数会发出输入名称并将其值返回到父组件，从而更新原始 filters.productId.value 值。这很好用。

现在的问题是我的父组件上有一个函数，它将 filters.productId.value 值重置回 null。它看起来像这样：

clearFilters() {
    for (const [key, value] of Object.entries(this.filters)) {
        this.filters[key].value = null;
    }
}

现在我的子组件 LabelInput 中的数据没有改变，即使 filters.productId.value 现在为空。如何刷新子组件？

Answer 1

我还没有将 Vue 用作类组件，但似乎问题在于将 prop 设置为类中的属性。

private inputData = this.data

Vue 监听 prop 变化，但是 data 不监听引用的变化，所以 prop 发生了变化，但 inputData 没有变化，因为 Vue 没有为它设置监听器。

当我想做与您类似的事情时，我使用computed 属性。查看docs 看看它是如何实现的。

使用计算属性。

get inputData() {
  return this.data;
}

我相信这会如您所愿。

为了更好地可视化我们在 cmets 中所说的内容，下面是没有 v-model 的代码的样子。

输入：

<input :value="inputData" @input="updateValue($event.target.value)" :type="inputType" :id="inputId" :name="inputEnabled ? inputName : false" :placeholder="placeholder" @focus="focused = true" @blur="focused = false">

吸气剂：

get inputData() {
  // you can change your prop here and return a new value. 
  // A lower or upper case, for example. Just don't change the prop, only use it.
  return this.data;
}

更新值：

updateValue(value) {
  this.$root.$emit('input', {'inputName' : this.inputName, 'inputValue' : value});
    }
}

另外，我认为不需要使用$root，因为您可以在组件中使用$emit。对于非类组件你通过this.$emit访问，我相信这里应该是一样的。

你可以做的另一个改变是在 html 中监听事件：

<label-input inputId="formProductId"
             inputType="number"
             inputName="productId"
             :inputEnabled="filters.productId.options"
             :label="translations['product_id']"
             :placeholder="translations['product_id']"
             :data="filters.productId.value"
             @updateValue="doSomething"

/>

您可以声明一个名为doSomething 的方法，它将接收到的值作为第一个参数，或者简单地将变量设置为事件@updateValue="(value) => {filters.productId.value = value}" 接收到的值。这也可以。