Vue3--组件的v-module

组件的v-module

本质

前面我们在input中可以使用v-model来完成双向绑定：
这个时候往往会非常方便，因为v-model默认帮助我们完成了两件事；
v-bind:value的数据绑定和@input的事件监听；

<input :value="message" @input="$event.target.value">

我们会发现和input元素不同的只是属性的名称和事件触发的名称而已

<my-inpyt :modelValue="appCounter" @update:modelValue="appCounter=$event"></my-inpyt>

组件的v-model 默认modelValue

<template>
	<div class="app">
		<counter v-model="appCounter"></counter>
	</div>
</template>

<script>
import Counter from './Counter.vue'
export default {
	data() {
		return {
			message: 'Hello, world',
			appCounter: 100,
		}
	},
	components: {
		Counter,
	}
}
</script>

<template>
	<div>
		<h2>counter:{{modelValue}}</h2>
		<button @click="changeCounter">修改counter</button>
	</div>
</template>

<script>
export default {
	props: {
		modelValue: {
			type: Number,
			default: 0
		}
	},
	emits: ['update:modelValue'],
	methods: {
		changeCounter() {
			this.$emit('update:modelValue', 999)
		}
	}
}
</script>

更改modelValue的名称

可以在v-model后接:更改名称