在学习vue2时有学过数据绑定
通过v-model可以把input的值实时同步到data里,这样就可以使用input的值了。
在后面的练习里会经常存在一些子组件里有input,但需要把input的值在父组件里使用,我现在意识到解决这种情况的方法就是利用了v-model的原理。
首先父组件给子组件传参,子组件通过props接收这个值,并把它用于input的value值。
然后父组件给子组件传一个函数,给子组件的input添加输入事件,在输入事件的函数里调用父组件传过来的函数,同时把input的值当做实参传过去。
当父组件被调用时,把接受到的实参赋值给父组件里的变量,这样就能实现父组件获取子组件里input的值。
<PayInvoice
:value="invoice"
@fetchInvoiceInfo="fetchInvoiceInfo"
/>
data() {
return {
invoice: '' // 发票信息
}
},
methods: {
// 获取发票信息
fetchInvoiceInfo(e) {
this.invoice = e
}
}
//以上是父组件
<input type="text" :value="value" @input="changeValue($event)" placeholder="请输入发票信息"/>
props: {
value: {
type: String,
default: ''
}
},
data() {
return {
}
},
computed: {},
watch: {},
created() {
},
mounted() {
},
destroyed() {
},
methods: {
changeValue(e) {
this.$emit('fetchInvoiceInfo', e.target.value)
}
}
//以上是子组件
感觉好像有更好的写法,但是想不起来了,以后遇到了再来记录下
<template>
<input class="test-input" type="text" v-model="inputValue"/>
</template>
props: {
value: {
type: String,
default: ''
}
},
computed: {
inputValue: {
get() {
return this.value
},
set(newValue) {
this.$emit('input', newValue)
}
}
}
子组件
<TestInput v-model="testVal"/>
data() {
return {
testVal: '',
}
遇到了第二种写法