VUE组件封装_vue组件内部双向绑定
2023-06-13 09:14:49 时间
大家好,又见面了,我是你们的朋友全栈君。
官方:一个组件上的 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:
<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:
<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
相关文章
- Java项目毕业设计:基于springboot+vue的电影视频网站系统「建议收藏」
- 尚硅谷Vue课程P30-P35笔记(后台回复 vue 可获得更多笔记!)
- 如何查看Vue项目vue的版本号
- vue pc端打印二维码[通俗易懂]
- vue封装组件方法_什么是vue组件
- vue封装组件以及调用「建议收藏」
- 如何使用Vue封装组件[通俗易懂]
- 请说下封装 vue 组件的过程?_组件二次封装的必要性
- vue 调用子组件方法失败_Vue子组件调用父组件的方法及常见问题「建议收藏」
- IntelliJ IDEA使用 vue-cli 创建Vue项目
- 个人笔记(vue篇)
- 快速部署Vue.js前端项目
- 【Vue】手拉手带你走进Vue大门(概念&指令)
- Mac升级卸载vue/cli2.9.6--无法卸载vue
- Vue与Oracle携手,联手打造革命性Web应用(vueoracle)
- Vue实现Redis订阅消息的实现方案(vue 订阅redis)
- Vue如何利用Redis加速应用程序性能(vue如何使用redis)
- Vue结合Redis实现性能优化(vue引入redis)