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>
    
Logo

前往低代码交流专区

更多推荐