vue2与3中v-model的封装(在组件中使用v-model)

在vue2中

1.如果想要使用v-model对text类型的输入框进行封装,核心代码如下:
核心代码:

父组件:
<show-model3 v-model="inputvalue3"></show-model3>
子组件:

<template>
  <div>
    <div>内容: <input type="text" :value="value" @input="inputMethods" /></div>
    <div>{{ value }}</div>
  </div>
</template>

<script>
export default {
  props: ["value"],
  name: "vmodel",
  methods: {
    inputMethods(a) {
      this.$emit("input", a.target.value)
    },
  },
}
</script>

<style></style>

在这里插入图片描述

2.如果想要使用v-model对checkbox类型的输入框进行封装,核心代码如下:

父组件:
<show-model4 v-model="inputvalue4"></show-model4>
子组件:
<template>
  <div>
    <div>
      内容: <input type="checkbox" :checked="checked" @change="inputMethods" />
    </div>
    <div>
      <span>当前的布尔值为:</span>
      <span>{{ checked }}</span>
    </div>
  </div>
</template>

<script>
export default {
  props: ["checked"],
  name: "vmodel",
  model: {
    prop: "checked",
    event: "change",
  },
  methods: {
    inputMethods(e) {
      this.$emit("change", e.target.checked)
    },
  },
}
</script>

<style></style>

在这里插入图片描述

在vue3中

具体详细内容请点击这里查看官方文档

使用默认的props进行绑定

方式一(用的比较多一点)

父组件:

<template>
  <ao1com @val="myval" v-model="mynum"></ao1com>
  <button @click="getval">点我获取munum</button>
</template>

<script lang="ts">
import ao1com from './com/ao1com.vue'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'a-01',
  components: { ao1com },
  setup() {
    var mynum = ref('88')
    // 用于点击之后获取input输入框的数据
    function getval() {
      console.log(mynum.value)
    }
    // 用于实时获取input输入框的数据
    function myval(data: string) {
      // 方式一
      // console.log(mynum.value)
      // 方式二
      console.log(data)
    }
    return { getval, mynum, myval }
  }
})
</script>

子组件:

<template>
  <div>
    <input type="text" :value="modelValue" @input="handleinput" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HomeView',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['val', 'update:modelValue'],
  setup(props, { emit }) {
    var handleinput = function (e: any) {
      // 这个放到上面先去更新父组件的值
      emit('update:modelValue', e.target.value)
      // 这个emit一定要放到下面
      emit('val', e.target.value)
    }
    return { handleinput }
  }
})
</script>

方式一(使用computed)

父组件不用变:

<template>
  <ao1com @val="myval" v-model="mynum"></ao1com>
  <button @click="getval">点我获取munum</button>
</template>

<script lang="ts">
import ao1com from './com/ao1com.vue'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'a-01',
  components: { ao1com },
  setup() {
    var mynum = ref('88')
    // 用于点击之后获取input输入框的数据
    function getval() {
      console.log(mynum.value)
    }
    // 用于实时获取input输入框的数据
    function myval(data: string) {
      // 方式一
      // console.log(mynum.value)
      // 方式二
      console.log(data)
    }
    return { getval, mynum, myval }
  }
})
</script>

子组件:

<template>
  <div>
    <!-- <input type="text" v-model="sonval" /> -->
    <!-- 上面的代码等价于 -->
    <input :value="sonval" @input="sonval = $event.target.value" />
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'HomeView',
  props: {
    modelValue: {
      type: String,
      default: ''
    }
  },
  emits: ['val', 'update:modelValue'],
  setup(props, { emit }) {
    var sonval = computed({
      get() {
        emit('val', props.modelValue)
        return props.modelValue
      },
      set(value) {
        emit('update:modelValue', value)
      }
    })
    return { sonval }
  }
})
</script>

在这里插入图片描述

使用自定义的props进行绑定

默认情况下,v-model 在组件上都是使用 modelValue 作为 prop,并以 update:modelValue 作为对应的事件。我们可以通过给 v-model 指定一个参数来更改这些名字:如下面的例子中使用unival01代替默认的modelValue
父组件:

<template>
  <ao1com @val="myval" v-model:unival01="mynum"></ao1com>
  <button @click="getval">点我获取munum</button>
</template>

<script lang="ts">
import ao1com from './com/ao1com.vue'
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'a-01',
  components: { ao1com },
  setup() {
    var mynum = ref('88')
    // 用于点击之后获取input输入框的数据
    function getval() {
      console.log(mynum.value)
    }
    // 用于实时获取input输入框的数据
    function myval(data: string) {
      // 方式一
      // console.log(mynum.value)
      // 方式二
      console.log(data)
    }
    return { getval, mynum, myval }
  }
})
</script>

子组件:

<template>
  <div>
    <input type="text" :value="unival01" @input="handleinput" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HomeView',
  props: {
    unival01: {
      type: String,
      default: ''
    }
  },
  emits: ['val', 'update:unival01'],
  setup(props, { emit }) {
    var handleinput = function (e: any) {
      // 这个放到上面先去更新父组件的值
      emit('update:unival01', e.target.value)
      // 这个emit一定要放到下面
      emit('val', e.target.value)
    }
    return { handleinput }
  }
})
</script>

多个 v-model 绑定

父组件

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

子组件:

其他

其实还可以使用一个库,功能非常强大叫做@vueuse/core,可以非常方便的帮助我们实现v-model
实例代码:
在这里插入图片描述

  • 4
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

白嫖leader

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值