Question

Vcode在子组件中。

data() {
    return {
      vcode: null,
    };
  },

我需要通过父组件方法访问此值。

verifyCode() {
   const code = this.vcode
}

尝试返回未定义。如何访问此值？

更新

我尝试了建议，但仍然得到不确定的值

子组件的输入字段

 <input
          class="form-control mt-5"
          v-model.trim="vcode"
          :class="{'is-invalid' : $v.vcode.$error }"
          @input="$v.vcode.$touch(), vcodenum = $event.target.value"
          placeholder="Enter your 6 digit code"
        />

在父组件上，我在引用子组件的地方添加了以下内容

<step2 ref="step2" @on-validate="mergePartialModels" v-on:vcodenum="vcode = $event"></step2>

我在父组件中的方法

verifyCode() {
   const code = this.vcode
   console.log(code)
}

我仍然不确定。

我也尝试过此操作：

子组件

    <input
      class="form-control mt-5"
      v-model.trim="vcode"
      :class="{ 'is-invalid': $v.vcode.$error }"
      @input="$v.vcode.$touch(), onInput"
      placeholder="Enter your 6 digit code"
    />

道具

  props: {
    value: {
      type: [String, Number, Boolean],
      default: "",
    },
  },

方法

onInput(e) {
      this.$emit('on-input', e.target.value)
    },

父母

 <step2 ref="step2" @on-validate="mergePartialModels" :value="vcode" @on-input="handleInput"></step2>

  data() {
    return {
      vcode: null
    };
  },

方法

  handleInput(value) {
    this.vcode = value
    console.log(this.vcode)
  },

该值最终输出null。如果我使用v绑定，则会出现此错误：：value =“ value”与同一元素上的v-model冲突，因为后者已经在内部扩展为绑定值

Answer 1

您可以在孩子的input事件中侦听并将其值发送给父对象。可以在整个应用程序中重复使用。

// InputComponent.vue

<input :value="value" @input="onInput" />

....
props: {
  value: {
    type: [String, Number, Boolean] // Add any custom types,
    default: ''
  }
},
methods: {
  onInput(e) {
    this.$emit('on-input', e.target.value)
  }
}


// Parent.vue
<InputComponent :value="vCode" @on-input="handleInput" />
....
data() {
  return {
    vcode: null
  }
},
methods: {
  handleInput(value) {
    this.vode = value
  }
}

如何在vue中访问子组件中的值

1 个答案: