[JavaScript知识库]Vue3 组件传值（v-model）

//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>

不清楚是不是自己遗漏了哪方面导致的，欢迎评论区指教