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

Posted 郝艳峰Vip

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue v-model 在自定义组件上的使用教程相关的知识,希望对你有一定的参考价值。

前言


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

结束语

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

以上是关于vue v-model 在自定义组件上的使用教程的主要内容,如果未能解决你的问题,请参考以下文章

Vue 中 v-model 在自定义组件中的使用

vue框架之自定义组件中使用v-model

Vue学习Vue高级特性

在自定义组件上使用时 v-model 和 .sync 有啥区别

vue3自定义组件使用v-model实现双向数据绑定

组件使用v-model$listeners.sync(区别于v-model的双向数据绑定)