v-model 使用

v-model 介绍

官方说明：v-model (opens new window)

v-model 的出现少去了我们手动赋值的一步
常用:

• input
• textarea
• component

组件内自定义 v-model

步骤：要使自定义组件也支持 v-model

• 先定义一个组件，接收一个参数。组件内需要加上 model 属性。页面点击后，触发 model 绑定的方法，修改对应 porp 的值。这时候父页面也会同步更新

直接看个 demo

父组件

<template>
  <div>
    <child v-model="showModel"></child>
  </div>
</template>

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

子组件

<template>
  <div :class="['mask',show?'show':'']" @click.stop="$emit('bindClose',false)">
    这里是蒙版层的内容
  </div>
</template>

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

定义 model 后,shou 参数就会被自动绑定到 v-model 中。如果要修改 v-model 的值，需要触发对应 model 中的 event。要使用 $emit 去触发。