Vue中使用model属性

model属性接收两个参数

• 类型：{ prop?: string, event?: string }

1. prop 也就是调用该组件的父组件中使用v-model指令绑定的属性
2. event 对应的是修改prop指定属性的值的函数

示例

// 子组件
<template>
  <el-dialog
    :visible="visible"
    @close="onClose"
  >
  </el-dialog>
</template>

<script>
export default {
  name: 'HDialog',
  model: {
    prop: 'visible',
    event: 'closeModal'
  },
  props: {
    visible: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  methods: {
    // 点击关闭抽屉层
    onClose() {
      this.$emit('close')
      // 修改model中的值
      this.$emit('closeModal', false)
    }
  }
}
</script>

// 父组件
<h-dialog v-model="visible"></h-dialog>