vue.js - Vue 中父组件如何获取子组件中input的值，求大神

问题描述

问 题

如题：
Vue 中父组件如何获取子组件中input的值，求大神

父组件：

<template>
    <mt-header fixed title="绑定手机"></mt-header>
    <mt-content class-name="leh-bg-grey-body">
        <div class="page-part register-bind-box">
            <mt-field placeholder="请输入手机号码" type="tel" :attr="{ maxlength: 11 }" v-el:tels></mt-field>
            <mt-field placeholder="请输入验证码" type="tel" :attr="{ maxlength: 6 }">
                <span class="mint-field-state is-default register-bind-code">
                    <i class="mintui mintui-field-default"></i>
                    <span class="leh-full-tip-btn leh-bg-green leh-c-white">获取验证码</span>
                </span>
            </mt-field>
        </div>
        <div class="register-bind-next-btn">
            <mt-button size="large" type="green" @click="nextstep">下一步</mt-button>
        </div>
    </mt-content>
</template>
<script>
    import MtContent from '../../components/content'
    import MtHeader from '../../components/header.vue'
    import MtButton from '../../components/button.vue'
    import MtField from '../../components/field.vue'
    import $ from 'zepto'

    export default{
      data () {
        return{
          msg:'hello vue'
        }
      },
        methods: {
            nextstep () {
            }
        },
        components: {
            MtContent,
            MtHeader,
            MtButton,
            MtField
        }
    }
</script>

子组件：

<template>
  <div class="mint-field">
    <x-cell
      class="mint-field-cell"
      :title="label"
      :class="[{ 'is-nolabel': !label }, {
        'is-textarea': type === 'textarea'
      }]">
      <input
        v-el:input
        class="mint-field-core"
        :placeholder="placeholder"
        :number="type === 'number'"
        v-else
        :type="type"
        @focus="active = true"
        :disabled="disabled"
        :readonly="readonly"
        v-model="value">
      <div
        @click="value = ''"
        class="mint-field-clear"
        v-show="value && type !== 'textarea' && active">
        <i class="mintui mintui-field-error"></i>
      </div>
      <span class="mint-field-state" v-if="state" :class="['is-' + state]">
        <i class="mintui" :class="['mintui-field-' + state]"></i>
      </span>
    </x-cell>
    <slot></slot>
  </div>
</template>

解决方案

以上问题已经找到答案了，可以使用v-ref绑定子组件对象，然后在父组件中直接this.$refs.XX访问。谢谢大家的关注与回答！

这篇关于vue.js - Vue 中父组件如何获取子组件中input的值，求大神的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！