如下的效果,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>