自定义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}}时，显示预期值，但输入实际上没有显示文本

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>

Answer 2

为了在自定义组件上实现双向绑定，您必须在子组件上遵循特殊语法。您必须将value作为道具传递，并在方法上发射input。尝试更新你的代码如下：

<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",
    "value"
  ],
  methods: {
    action(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

CCD_ 6作为道具而不是计算属性。更多关于这个在文档