给自己的组件添加v-model还是非常必要,可提高组件的可用性,今天捣鼓了一下,做个记录:
父组件:
<template>
<p>父组件</p>
<div>父组件v-model变量:{{res}}</div>
<my-child v-model="res"></my-child>
</template>
<script>
import myChild from './components/child.vue'
import { ref } from 'vue'
export default {
components:{
myChild
},
setup() {
let res = ref('父组件变量')
return{
res
}
}
}
</script>
子组件代码:
<!-- child -->
<template>
<p>子组件</p>
<input type="text" @input="inputRes()" v-model="data.text" placeholder="哈哈哈" />
</template>
<script>
import { reactive,ref } from 'vue'
export default {
props:{
modelValue:{
type:String,
default:''
}
},
setup(props,context){
let data = reactive({
text:'你好',
modelRes:props.modelValue
})
function inputRes(){
data.modelRes = data.text
context.emit('update:modelValue', data.modelRes )
}
return{
data,
inputRes
}
}
}
</script>
数据流向:
当然,也不局限于表单事件:
<template>
<p>父组件</p>
<div>父组件v-model变量:{{data.resArray}}</div>
<my-child v-model="data.resArray"></my-child>
</template>
<script>
import myChild from './components/child.vue'
import { ref,reactive } from 'vue'
export default {
components:{
myChild
},
setup() {
const data = reactive({
resArray:[]
})
return{
data
}
}
}
</script>
<!-- child -->
<template>
<p>子组件</p>
<button type="button" @click="optArr">给数组push</button>
</template>
<script>
import { reactive,ref } from 'vue'
export default {
props:{
modelValue:{
type:Array
}
},
setup(props,context){
let data = reactive({
modelRes:props.modelValue
})
function optArr(){
console.log(data)
data.modelRes.push(1)
context.emit('update:modelValue', data.modelRes )
}
return{
data,
optArr
}
}
}
</script>
效果展示:
注意:
v-model绑定的变量默认由子组件的props的modelValue接收 ,写其他名字则接收不到,modelValue写错或者写其他名字都不行
2022.02.13记
之前写的有些片面:
v-model是可以写变量名的
<my-child v-model:ghui="data.ghui"></my-child>
并且一个组件也可以支持多个v-model,子组件emit的时候这样写即可
context.emit('update:ghui', '哈哈哈' )