vue3组件数据双向绑定
2024-01-07 18:30:07
1.双向绑定传递基本数据类型
父组件
<template>
<div>
<test v-model="searchText"/>
<p>父组件值:{{ searchText }}</p>
</div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import test from "@/components/test.vue";
const searchText=ref(0)
</script>
子组件(写法一)
<template>
<div>
<input type="text" :value="modelValue" @input="emit('update:modelValue',$event.target.value)">
</div>
</template>
<script setup lang='ts'>
const props=defineProps(
{
modelValue:{
type:Number,
require:true
}
}
)
const emit=defineEmits(['update:modelValue'])
</script>
子组件(写法二 绑定到计算属性上)
<template>
<div>
<input type="text" v-model="hhh">
</div>
</template>
<script setup lang='ts'>
import { computed } from "vue";
const props=defineProps(
{
modelValue:{
type:Number,
required:true
}
}
)
const emit=defineEmits(['update:modelValue'])
const hhh=computed({
get(){
return props.modelValue
},
set(value){
emit('update:modelValue',value)
}
})
</script>
2.双向绑定对象
父组件
<template>
<div>
<test v-model="obj"/>
<p>父组件值:{{ obj.name }}</p>
</div>
</template>
<script setup lang='ts'>
import { ref } from 'vue'
import test from "@/components/test.vue";
const obj=ref({
name:"小明",
age:28
})
</script>
子组件
<template>
<div>
<input type="text" v-model="modelValue.name">
</div>
</template>
<script setup lang='ts'>
const props=defineProps(
{
modelValue:{
type:Object,
required:true
}
}
)
const emit=defineEmits(['update:modelValue'])
</script>
文章来源:https://blog.csdn.net/TZ1284063988/article/details/135406453
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!