Vue中使用model属性

model属性接收两个参数

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

prop 也就是调用该组件的父组件中使用v-model指令绑定的属性
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>

巴特西

Vue中使用model属性

最新文章

热门文章