自定义组件v-model的使用

自定义组件v-model的使用

首先 v-model是语法糖 他的实际意义是这样的
<input :value="value" @input="value= $event.target.value" />
然后 等价于
<input v-model="value"/>
由此我们可以想 我们是不是也可以在自定义组件中使用v-model呢?
是的, 接下来我们演示一下
父组件中
<template>
    <div class="s_process_line_two">
        <process-line-two-slide-pop v-model="testmodel" ref="ProcessLineTwoSlidePop"/>
    </div>
</template>
<script>
data() {
    return {
        testmodel: 111111
    }
}
</script>
子组件中
<template>
 <div class="s_process_line_two_slide_pop">
   <el-drawer title="我是标题" :visible.sync="show" :direction="direction" :before-close="handleClose">
     
  <span @click="testClick">我来啦!</span>
</el-drawer>

 </div>
</template>

<script>
export default {
  model: {
    prop: 'someProp', // 注意,是prop,不带s。我在写这个速记的时候,多写了一个s,调试到怀疑人生
    event: 'someEvent'
  },
  props: ['someProp'],
  computed: {
    currentValue() {
      return this.someProp
    }
  },
  data() {
    return {
      show: false,
      direction: 'rtl'
    }
  },
  methods: {
    testClick() {
      console.log(this.currentValue)
      this.$emit('someEvent', this.currentValue - 222) 
    },
    handleClose() {
      this.show = false
      console.log('xxx')
    },

    onShow() {
      this.show = true
    },

    onClose() {
      this.show = false
    }
  }
}
</script>

<style lang='scss'>

</style>
如果我们不需要自定义v-model的属性名称和触发出去的名称可以使用默认的 代码如下:
<template>
 <div class="s_process_line_two_slide_pop">
   <el-drawer title="我是标题" :visible.sync="show" :direction="direction" :before-close="handleClose">
     
  <span @click="testClick">我来啦!</span>
</el-drawer>

 </div>
</template>

<script>
export default {
  props: ['value'],
  computed: {
    currentValue() {
      return this.value
    }
  },
  data() {
    return {
      show: false,
      direction: 'rtl'
    }
  },
  methods: {
    testClick() {
      console.log(this.currentValue)
      this.$emit('input', this.currentValue - 222) 
    },
    handleClose() {
      this.show = false
      console.log('xxx')
    },

    onShow() {
      this.show = true
    },

    onClose() {
      this.show = false
    }
  }
}
</script>

<style lang='scss'>

</style>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值