Vue input子组件如何在父组件中获取到值

如下的效果，input控件是子组件。

父组件调用子组件的值

首先input的值是个变量，需要在子组件的data中定义声明变量value值。

input子组件：

<script>
export default {
  name: 'Input',
  data () {
    return {
      value: ''
    }
  }
}
</script>

其次给input子组件做进行双向绑定（v-model="value"，value指在data中声明的变量）

<input class="input" type="text" v-model="value" />

调用子组件：（访问子组件实例或子元素，通过 ref 特性为这个子组件赋予一个 ID 引用）

<login-input ref="numberInput"></login-input>

获取input子组件的值

console.log(this.$refs.numberInput.value)

整体代码如下：

Input.vue

<template>
  <div>
    <input class="input" type="text" :placeholder="placeholder" v-model="value" />
  </div>
</template>

<script>
export default {
  name: 'Input',
  props: {
    placeholder: String
  },
  data () {
    return {
      value: ''
    }
  }
}
</script>

login.vue

<template>
  <div>
    <login-input placeholder="请输入账号" ref="numberInput"></login-input>
    <login-input placeholder="请输入密码" ref="passwordInput"></login-input>
  </div>
</template>

<script>
import LoginInput from './components/Input'
export default {
  name: 'Login',
  components: {
    LoginInput
  },
  methods: {
    loginSystem () {
      console.log(this.$refs.numberInput.value + '\n' + this.$refs.passwordInput.value)
    }
  }
}
</script>