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

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"
    />

我仍然没有定义

我也试过这个：

子组件

 <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"
    />

方法

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

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

母公司

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

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

该值最终输出为null。 如果使用v-bind，则会出现以下错误：

---

：value=“value”与同一元素上的v-model冲突，因为后者已在内部扩展为值绑定

您可以侦听子元素上的

输入

事件并将值发送给父元素。这可以在整个应用程序中重用

// 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
  }
}

//InputComponent.vue
....
道具：{
价值：{
类型：[字符串、数字、布尔]//添加任何自定义类型，
默认值：“”
}
},
方法：{
输入（e）{
此.$emit（'on-input'，例如target.value）
}
}
//Parent.vue
....
数据（）{
返回{
vcode:null
}
},
方法：{
handleInput（值）{
this.vode=值
}
}

尝试在同一元素上使用此：：value=“value”与v-model冲突时，我遇到以下错误，因为后者已扩展为内部父级值绑定-我认为这是因为我需要删除v-model。但我还需要它在输入上运行$v.vcode.$touch（）。如何解决此问题？是的，使用value时不需要v型。如果我们这样做，它会抛出上面的错误。好吧，但这会破坏我的验证，因为我需要在我的输入字段中包括v-model.trim=“vcode”@input=“$v.vcode.$touch（），”这是一些如何操作的方法