大家好，又见面了，我是你们的朋友全栈君。
官方：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。
v-model实际上只是一个语法糖：
<input v-model=”password”>
作用与以下相似：
<input type=”text” :value=”password” @input=”password=$event.target.value”>
也就是通过v-model传递的值，最终是传递给了子组件props中value属性，子组件修改value值需要通过触发input事件并传递需要修改的值给父组件。
简单的效果：
父组件Home.vue：
代码语言：javascript复制<template>
<div class="home">
<button @click="isShow=true">修改</button>
<child v-model="isShow" title="修改昵称"></child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {
name: 'Home',
components: {
child
},
data() {
return {
isShow:true
};
},
methods: {
},
mounted() {
},
}
</script>
<style lang="scss" scoped>
.home{
position: absolute;
width:100%;
height:100%;
display: flex;
justify-content: center;
align-items: center;
}
</style>子组件Child.vue：
代码语言：javascript复制<template>
<div>
<div class="fullbg" v-if="value" @click="cannelPop()">
<div class="fulltop" :class="{'bottom':type=='bottom','top':type!='bottom'}" @click.stop="">
<div class="title" v-if="title">{
{title}}</div>
<slot></slot>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'child',
components: { },
props:{
//控制显示与隐藏
value:{
type:Boolean,
default:false
},
//弹窗类型，两种：上和下
type:{
type:String,
default:"top"
},
//弹窗标题，如果不给标题，那么也不会显示标题行
title:{
type:String,
default:""
}
},
data() {
return {
};
},
mounted() {
},
methods: {
//点击黑色遮罩区域隐藏弹窗
cannelPop(){
this.$emit('input',false); //通过触发input去修改v-model的值
}
},
};
</script>
<style lang="scss" scoped>
.fullbg{
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
}
.fulltop {
position: fixed;
z-index: 1001;
left: 0;
right: 0;
margin: 0 auto;
box-sizing: border-box;
padding: 20px 10px 20px;
background: #FFFFFF;
max-height: 80vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.top{
top:0;
}
.bottom{
bottom:0;
}
.title{
font-size: 16px;
font-weight: bold;
text-align: center;
}
</style>说明： (默认状态下是model:{prop:’value’,event:’change’})
默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
如果想修改v-model绑定子组件的props属性值，那么可以修改子组件model中的prop为需要设置的props中的某个值。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/190400.html原文链接：https://javaforall.cn
