Vue中使用model属性

model属性

官网介绍：

https://cn.vuejs.org/v2/api/#model

model属性接收两个参数

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

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

• Example：

  // 子组件
  <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>