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

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>

2. 在需要使用的页面，引入该组件。并且使用 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` 的值父组件也能同步更新到了