vue3 自定义v-model

sunshine08_07

于 2021-08-05 15:45:24 发布

阅读量831

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.csdn.net/sunshine08_07/article/details/119419624

vue 专栏收录该内容

4 篇文章

订阅专栏

子组件input，父组件实时接收子组件输入的值。之前用的都是子组件向父组件传值最原始的方法，vue2.2以后新增加了自定义v-model语法糖。亲测好用

子组件：

<template>
    <input @input="$emit('update:inputVal',$event.target.value)">
</template>
<script>
    export default {
        props: {
            inputVal: {
                type: String || Number,
                required: true
            },
        }
    }
</script>

父组件：

<template>
    <easyInput v-model:inputVal="str"/>
</template>

<script>
    import easyInput from "@/components/easyInput";
    export default {
      components: {
        
        easyInput: easyInput,
      },
    }
</script>