parent 父组件
<template>
<div>
<!-- 通过v-model把值传给子组件 -->
<child v-model="inputVal"></child>
</div>
</template>
<script>
import Child from './components/child.vue'
export default {
components: {
Child,
},
data() {
return {
// 父组件的值
inputVal: '',
}
},
watch: {
// 监听父组件的值
inputVal(e) {
console.log('父组件的值', e)
},
},
}
</script>
<style>
</style>
child 子组件
<template>
<div>
<input type="text" v-model="childVal" @input="inputChange">
</div>
</template>
<script>
export default {
props: {
// 子组件接收值
// 必须要使用value
value: { type: String, default: '' },
},
data() {
return {
childVal: this.value,
}
},
methods: {
inputChange(e) {
console.log('子组件的值', e)
this.$emit('input', e.target.value) // 这儿必须用input 发送数据,发送的数据会被父级v-model="inputVal"接收到,再被value=inputVal传回来。
},
},
}
</script>