自定义 Vue 输入组件不显示绑定值答案

【问题标题】：Custom Vue Input Component not Displaying Bound Value自定义 Vue 输入组件不显示绑定值
【发布时间】：2021-02-09 19:24:06
【问题描述】：

我已经创建了一个 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}}按预期显示值，但输入实际上并未显示文本

【问题讨论】：

你需要在父级中监听@input

标签： javascript html vue.js vue-component

【解决方案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>

【讨论】：

谢谢！感谢您抽出时间来帮助我

【解决方案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>

value 作为道具而不是计算属性。更多信息请关注docs

【讨论】：