vue3.0 实现自定义组件v-model

原创已于 2023-08-09 18:16:20 修改 · 560 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端 #前端框架

于 2023-03-14 16:14:07 首次发布

文章介绍了在Vue中如何使用v-model进行双向数据绑定，以及在封装通用输入表单组件时，如何通过prop和emit实现父子组件间的数据传递。示例展示了在子组件inputModel.vue中接收并更新父组件传递的modelValue属性。

这是我面试的时候遇到的一个机试题目。

在vue中我们通常form 表单输入可以通过 v-model 实现双向数据绑定例如：
<template>
    <input v-model="conut" />
    {{conut}}
</template>

<script lang='ts' setup>
    import {ref} from 'vue';
    const conut=ref(1)
</script>
在表单中输入时,页面展示的 conut 也会跟着相应改变

如果是封装的通用输入表单组件,一般会使用 prop+emit 来实现父子组件数据传递

例如:封装一个数字输入框组件

组件

index.vue

<template>
    <InputModel v-model="conut"></InputModel>
</template>

<script lang='ts' setup>
    import InputModel from "@/components/InputModel.vue";
    import {ref} from 'vue';
    const conut=ref(1)
</script>

直接引用子组件添加v-model关键字

子组件

inputModel.vue

<template>
  name:<input :value="modelValue" @input="inputValue">
</template>
<script setup lang='ts'>
    import {defineProps,defineEmits} from 'vue';
    //使用defineProps 接收父组件v-model的值
    const props=defineProps(['modelValue'])
    // 通过引入defineEmits（）Api把值传给父组件
    const emit=defineEmits(['Update:modelValue'])
    const inputValue=(e)=>{
          const value=e.target.value;
          emit('Update:modelValue',value)
    }
</script>
<style scoped lang='scss'>

</style>