vue 自定义组件使用 v-model 属性

在 vue 中使用 v-model 可以同步更新视图和数据源的值,常用于输入框(输入框可视为组件),输入后直接同步了 data 的值


在自定义组件中使用 v-model 同步组件和 data 的值。以首页全屏广告为例:

自定义组件

  1. 先定义一个组件,接收一个show参数。页面内需要加上 model。页面点击后,触发model 绑定的方法,修改对应porp的值。这时候父页面也会同步更新
<template>
  <div :class="['mask',show?'show':'']" @click.stop="$emit('bindClose',false)">
    这里是蒙版层的内容
  </div>
</template>

<script>
  export default {
    name: "ScreenAd",
    props: {
      // 是否显示蒙版层
      show: {
        type: Boolean,
        default: false
      }
    },
    /**
     * v-model绑定对应的方法,和修改的方法
     */
    model: {
      prop: "show",
      event: "bindClose"
    }
  }
</script>

<style lang="scss" scoped>
  .mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0);
    &.show {
      background-color: rgba(0, 0, 0, 0.4);
    }
  }
</style>
  1. 在需要使用的页面,引入该组件。并且使用 v-model 传值(注意,这里和组件的 show)属性,不相干。因为组件中的 model 属性的关系,他们会自动关联起来
<template>
  <div>
    <screen-ad v-model="showModel"></screen-ad>
  </div>
</template>

<script>
  export default {
    data() {
      showModel: false
    }
  }
</script>

这时候只要修改父页面的 showModel 值,就可以同步到子组件中,让子组件的show变成 对应的值,而子组件修改了show` 的值父组件也能同步更新到了

Logo

前往低代码交流专区

更多推荐