Vue3 组件传值（v-model）_vue3 v-model传值-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_40275821/article/details/119190705

本文探讨了Vue中自定义组件使用v-model时遇到的命名限制，指出组件prop和事件名不能包含大写字母和短横线，并提供了一个示例代码展示正确用法。当尝试使用`childValue`替代`modelValue`时，发现不符合Vue的命名规则，引发问题。博客邀请读者分享解决方案和经验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//html:
<div id="app">
    <custom-input v-model="modelValue"></custom-input>
    <p>{{modelValue}}</p>
</div>

//script:
<script type="text/javascript">
	let App = Vue.createApp({
	    data(){
	        return{
	            modelValue:""
	        }
	    },
	})
	App.component('custom-input', {
	    props: ['modelValue'],
	    template: `
	        <input :value="modelValue" 
	        @input="$emit('update:modelValue', $event.target.value)"
	        >
	    `
	})
	App.mount("#app")
</script>

Tips：

上面是默认情况，组件上的v-model是使用modelValue作为prop，update:modelValue作为事件。我在修改名称时发现命名时出现的问题：名称只能英文字母小写加数字（例如：childvalue），不能大写（例如：childValue），不能使用“-”分隔（例如：child-value）。

//html
<div id="app">
    <custom-input v-model:childvalue="modelValue"></custom-input>
    <p>{{modelValue}}</p>
</div>

//script
<script type="text/javascript">
    let App = Vue.createApp({
        data(){
            return{
                modelValue:""
            }
        },
    })
    App.component('custom-input', {
        props: ['childvalue'],
        template: `
            <input :value="childvalue" 
            @input="$emit('update:childvalue', $event.target.value)"
            >
        `
    })
    App.mount("#app")
</script>