javascript - 自定义 Vue 输入组件不显示绑定值

Question

我已经创建了一个 vue 组件来重用我的应用程序，但我正在努力解决最初显示在输入文本字段中的值的一个方面。感觉好像我对渲染周期以及值绑定的工作方式有一些误解。

这是我制作的 Vue 组件：

<template>
  <div class="my-2">
    <label for="name">{{ label }} </label>
    <input
      :id="id"
      :name="name"
      :class="{
        input: true,
        'input-error': errorMessage && errorMessage != '',
      }"
      :value="value"
      v-on:input="action"
      :type="type"
      :required="!!required"
      v-once
    />
    <p v-show="errorMessage && errorMessage != ''" class="error-message">
      {{ errorMessage }}
    </p>
  </div>
</template>

<script>
export default {
  name: "BaseInput",
  props: [
    "defaultValue",
    "label",
    "type",
    "id",
    "name",
    "errorMessage",
    "required",
  ],
  computed: { 
    value() {
      console.log(this.defaultValue);
      return this.defaultValue
    },
  },
  methods: {
    action(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

我在我的父组件中引用它：

<base-input label="Base Input 2" id="in2" name="name" v-model="value"></base-input> {{value}}

当页面 {{value}}按预期加载显示值，但输入实际上并未显示文本时

标签： javascripthtmlvue.jsvue-component

Answer 1

defaultValue将道具更改value为如下所示。这应该在您的孩子和父母之间建立双向绑定。

<template>
      <div class="my-2">
        <label for="name">{{ label }} </label>
        <input
          :id="id"
          :name="name"
          :class="{
            input: true,
            'input-error': errorMessage && errorMessage != '',
          }"
          :value="value"
          v-on:input="action"
          :type="type"
          :required="!!required"
          v-once
        />
        <p v-show="errorMessage && errorMessage != ''" class="error-message">
          {{ errorMessage }}
        </p>
      </div>
    </template>
    
    <script>
    export default {
      name: "BaseInput",
      props: [
        "value",
        "label",
        "type",
        "id",
        "name",
        "errorMessage",
        "required",
      ],
      methods: {
        action(e) {
          this.$emit("input", e.target.value);
        },
      },
    };
    </script>