vue3.0 + Ts v-model在自定义组件上的使用教程

前言

---

之前在vue2.0版本介绍v-model在组件上的使用教程时详细介绍了vue3.0 v-model相比于2.0的变化，本篇文章主要介绍一下vue3.0的使用教程.

如何使用，第一步，index.vue作为父组件

这里采用了vant框架
<template>
	<van-button type="primary" @click="testComponentsModel">测试组件上的v-model</van-button>
	<!-- v-model用在组件上时默认使用`modelValue`作为prop,
	那么在子组件内就是以`update:modelValue`作为对应的事件。 -->
	<!-- 这时候可以通过给v-model指定一个参数来更改这个名字 也就是v-model:title="" -->
	<!-- 那么在子组件内就是以`update:title`作为对应的事件 -->
	<publicPopup v-model="isShowPopNotification"></publicPopup>	
</template>
<script setup lang="ts">
import publicPopup from '@/components/publicPopup.vue';
import { ref } from 'vue'
const isShowPopNotification = ref<boolean>(false);
const testComponentsModel = (()=>{
	isShowPopNotification.value = true;
})
</script>
<style scoped>
</style>

第二步，publicPopup.vue作为子组件

<template>
    <van-popup v-model:show="selfProps.modelValue" @click-close-icon="closeVantPopup" @click-overlay="closeVantPopup" closeable position="bottom" :style="{ height: '30%' }">
    </van-popup>
</template>
<script setup lang="ts">
import { ref } from 'vue';
//如果父组件内的V-model定义了参数为title,那么子组件内的所有的默认的modelValue需要改为自定义的title
//vue3.0需要采用defineProps来接受父组件传入的值
const selfProps = defineProps(['modelValue']);
//vue3.0需要采用defineEmits来触发更新事件
const selfEmit = defineEmits(['update:modelValue']);
const closeVantPopup = ref();
closeVantPopup.value = () => {
    selfEmit('update:modelValue',false);
}
</script>
<style scoped>
</style>

以上两步就是v-model在自定义组件上的基本使用，下边就是扩展的一些用法

vue3.0 组件上还可以绑定多个v-model

父组件

<template>
	<van-button type="primary" @click="firstPopup">测试绑定多个v-model  1</van-button>
	<van-button type="primary" @click="secondPopup">测试绑定多个v-model  2</van-button>
	<!-- 多个v-model控制组件内的多个弹窗或者事件-->
	<publicPopup v-model:first="firstValue" v-model:second="secondValue"></publicPopup>	
</template>
<script setup lang="ts">
import publicPopup from '@/components/publicPopup.vue';
import { ref } from 'vue'
const firstValue= ref<boolean>(false);
const secondValue= ref<boolean>(false);
const firstPopup = (()=>{
	firstValue.value = true;
})
const secondPopup= (()=>{
	secondValue.value = true;
})
</script>
<style scoped>
</style>

子组件

<template>
    <div>第一个v-model值{{ selfProps.first }}</div>
     <div>第二个v-model值{{ selfProps.second }}</div>
      <!-- 测试一个组件上有多个v-model -->
    <van-popup v-model:show="selfProps.first" @click-close-icon="closeVantPopup" @click-overlay="closeVantPopup" closeable position="bottom" :style="{ height: '30%' }">
    <p>测试一个组件上有多个v-model,这是第一个v-model</p>
    </van-popup>
       
    <van-dialog v-model:show="selfProps.second" title="标题" theme="round-button" @confirm="closeDialog">
        <p>测试一个组件上有多个v-model,这是第二个v-model</p>
    </van-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
//父组件内的V-model定义了参数为first和second,那么子组件内的所有的默认的modelValue需要改为自定义的first和second
const selfProps = defineProps(['first','second']);
const selfEmit = defineEmits(['update:first','update:second']);
const closeVantPopup = ref();
closeVantPopup.value = () => {
    selfEmit('update:first',false);
}
const closeDialog = ref();
closeDialog.value = () => {
    selfEmit('update:second',false);
}
</script>
<style scoped>
</style>

vue3.0 组件上v-model自定义修饰符

父组件

<template>
	<!-- 组件v-model的自定义修饰符 v-model.customDecorate -->
	<!-- 对于又有参数又有修饰符的v-model绑定,生成的prop名字将是addParams + ‘Modifiers’格式的  -->
	<!-- 默认的声明值是modelModifiers    加了参数的本例子中就是addParamsModifiers -->
	<CustomModifiers v-model:addParams.customDecorate="ModifiersValue"></CustomModifiers>
</template>
<script setup lang="ts">
import CustomModifiers from '@/components/CustomModifiers.vue';
import { ref } from 'vue'
const ModifiersValue = ref<boolean>(false);
</script>
<style scoped>
</style>

子组件

<template>
    <div>v-model的值 {{ selfProps.addParams }}</div>
    <div>v-model的修饰符(modelModifiers)的值 {{ selfProps.addParamsModifiers }}</div>
    <van-popup v-model:show="selfProps.addParams" @click-close-icon="closeVantPopup" @click-overlay="closeVantPopup" closeable position="bottom" :style="{ height: '30%' }">
    </van-popup>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { Dialog } from 'vant'
// 修饰符的默认值就是modelModifiers   如果父组件给v-model加了参数那就是参数拼接addParamsModifiers
const selfProps = defineProps(['addParams','addParamsModifiers']);
const selfEmit = defineEmits(['update:addParams']);
// 传入修饰符的话，那么值就true   {customDecorate:true}   那这个修饰符就可以用来做判断条件
console.log('v-model的修饰符(addParamsModifiers)的值',selfProps.addParamsModifiers);
if (!!selfProps.addParamsModifiers && selfProps.addParamsModifiers.customDecorate) {
    Dialog({
  message: '生命远不止连轴转和忙到极限，人类的体验远比这辽阔、丰富得多。',
  theme: 'round-button',
}).then(() => {
  // on close
});
}
const closeVantPopup = ref();
closeVantPopup.value = () => {
    selfEmit('update:addParams',false);
}
</script>
<style scoped>
</style>

结束语

有什么错误的地方，说出来一起探讨

---

本文内容为vue3.0自定义组件使用v-model,想详细了解vue2.0自定义组件使用v-model以及vue2.0和vue3.0的区别请移步
vue2.0 v-model在组件上的使用