前言
本教程是基于vue2.0版本的,3.0版本的等我在深刻的理解之后再来更新。
3.0新增和更改了一些api,看官方文档
在没有看vue3.0的官方文档之前,写一些自定义弹窗之类的组件时,都是用的$refs控制弹窗子组件的显示隐藏,看完之后了解到了有自定义组件的v-model
后就是这使用v-model了。
要想深刻的理解这个组件,知道
v-model
的实现原理是有对理解该组件很大帮助的。
V-model的实现原理请移步v-model的实现原理详解
接下来就是如何使用部分了。
step 一,官方文档和解读
也就是说父组件上的v-model默认监听子组件中的prop值和事件,从而更新父组件v-model="value"
value的值。。vue本身的双向绑定v-model
会监听input的输入事件实时更新,所以我们再自定义组件的v-model上也要监听下边代码中的change事件。
model:{
prop:'checked',
event:'change',
}
官方文档中有说到,仍需要再组件的props选项里声明这个model下的prop值
step 二,用一个demo深刻理解一下。
- 1,、首先创建一个常见的弹窗组件
publicToast.vue
/**
* author:'郝艳峰'
*/
<template>
<!-- 这里有两种情况的,一种是采用vant的popup组件 -->
<!-- <van-popup
v-model="isShowPublicTest"
position="bottom"
closeable
class="standard-popup"
@close="closePublicTest"
>
<div>测试model</div>
</van-popup> -->
<!-- 这一种自己定义弹窗 -->
<div class="main-test" v-if="isShowPublicTest" @click="closePublicTest">
<div class="test-content"></div>
</div>
</template>
<script>
export default {
model: {
prop: "isShowPublicTest",
event: "change",
},
props: {
isShowPublicTest: {
type: Boolean,
default: false,
},
},
data() {
return {};
},
methods: {
// 这个事件就是再关闭弹窗时---触发的change事件。。这是必须的,否则这个v-model不成立(参考v-model的实现原理就可以理解)
closePublicTest(){
// 这里就是弹窗关闭时实时通知model,也就是监听事件
this.$emit('change',false);
}
},
};
</script>
<style lang="scss" scoped>
.main-test{
width: 100%;
height: 100%;
border: 1px solid #000;
background: rgba(0,0,0,0.4);
position: fixed;
top: 0px;
left: 0px;
.test-content{
width: 100%;
height: 50%;
border: 1px solid red;
position: absolute;
bottom: 0px;
background: #fff;
}
}
</style>
- 2、父组件写法
//首先要引入子组件,步骤不能少,这里就不展示了。
//根据官方文档可知,这里更改testModel的值会实时更显到子组件的model下的prop值
<PublicTest v-model="testModel"></PublicTest>
// 所以当我有一个点击事件改变这个testModel会实时更新到子组件的isShowPublicTest,从而控制子组件的显示隐藏。
<i class="iconfont icon-chengshi1" @click="testModel= true"></i>
结束语
有用的知识当然要分享啊,又不是每个都会。