vue v-model 在自定义组件上的使用教程

Posted 2022-12-03 郝艳峰Vip

前言

---

本教程是基于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>

结束语

有用的知识当然要分享啊，又不是每个都会。