vue中model作为属性的用法和子组件双向绑定父组件

最新推荐文章于 2023-09-27 16:55:17 发布

大盗夕落

最新推荐文章于 2023-09-27 16:55:17 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：笔记

本文链接：https://blog.youkuaiyun.com/weixin_45621877/article/details/112243540

笔记专栏收录该内容

42 篇文章

订阅专栏

本文介绍了Vue中model作为属性的三种用法，包括model作为属性的配置方式，子组件如何实现双向绑定父组件的数据。通过示例代码展示了如何在父组件和子组件间进行数据交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种：model作为属性的用法
类型：｛prop?:string,event?:string｝
参考官网API：model
父组件

<modelchild v-model="test"></modelchild>
父的值{{test}}
<button @click='fn'></button>
……
import modelchild from '@/component/modelchild'
export default{
data(){
return{
test:0
}
},
methods:{
fn(){
this. test+=1
}
}
}

子组件

<div>{{msg}}</div>
<button @click="fn2"></button>
export default{
props:{
msg:{default:0}
},
model:{//使用model，这两个属性，prop属性说，我要将msg作为该组件被调用时，父组件model能取到的值，event说，我要emit  cc的时候，参数值就是父组件model收到的值
prop:'msg',
event:'cc'
},
methods:{
fn2(){
this. $emit('cc',this.msg+2)
}
}
}

第二种，父组件同上
子组件

<div>{{value}}</div>
<button @click="fn22"></button>
export default{
props:{
value:{default:0}
},
methods:{
fn22(){
this. $emit('input',this.value+2)

第三种
父组件

<modelchild3 v-model='searchtext'>
{{searchtext}}

子组件

<input type="text" :value="value" @input="$emit('input',$event.target.vakue)">

export default{
data(){

},
props:{
value:{default:0}
}
}