v-model

看了一整天，问chatgpt好多个蠢问题之后，甚至还跟它谈心了，"v-model真的看不懂怎么办...?"
双向绑定这样的说法好像很炫，但我听不太懂有点被搞混了，文件内提到一个字"synced with"，同步，嗯..好像有点什么了。

单一vue档里的v-model

最基本的v-model似乎是从表单开始的，想同步的东西是表单里某个元素的值和另一个ref(可以用来渲染到template里)，像是文件里的一个简单例子，在还没有v-model之前的日子，需要用v-bind & v-on来实现：

v-on用来把input的输入值同步给text ref(也就是input->text)：当有人在这个栏位输入东西的时候(听input这个event)，执行onInput这个callback，作什么呢？把text ref等于发生这个event的元素的值。v-bind用来把text ref的值回到input的值(也就是input<-text)，若有人在script里对text作某些操控(改值之类的)，input栏位也可以马上响应这个变化。

我写了input->text ＆ input<-text这样有没有比较有双向绑定的感觉？

<script setup>import { ref } from 'vue'const text = ref('')function onInput(e) {  text.value = e.target.value}</script><template>  <input :value="text" @input="onInput" placeholder="Type here">  <p>{{ text }}</p></template>

有了v-model的今天，所有的事情变得好简单，这部份

<input  :value="text"  @input="event => text = event.target.value">

改写成

<input v-model="text">

简单到之前我看不懂也用地好开心 XD

组件的v-model

组件的v-model是要同步谁呢？简单说就是child.vue里的一个ref ＆ parent.vue的另一个ref。
拿一个文件内的例子来看一下，就是想做到child.vue的model要和parent.vue的msg同步。不过再看一眼child.vue里的input元素里居然还有另一个v-model，这是为了同步model ＆ input栏位的值，于是model像是中间的桥樑，最后的结果是做出child.vue的input栏位值与parent.vue的msg同步。

child.vue

<script setup>const model = defineModel()</script><template>  <span>My input</span> <input v-model="model"></template>

parent.vue

<script setup>import Child from './Child.vue'import { ref } from 'vue'const msg = ref('Hello World!')</script><template>  <h1>{{ msg }}</h1>  <Child v-model="msg" /></template>

这边引进了一个新的写法defineModel，它其实回传了一个ref，所以model就看成一个ref，而它实际上作了什么事呢？

定义了一个名为modelValue的prop: 作为child的一个客製属性，可从parent那边接资料回child来进行input value的同步定义了一个名为update:modelValue的emit: 从child发出emit(with input value)，去同步parent的msg

<script setup>const props = defineProps(['modelValue'])const emit = defineEmits(['update:modelValue'])</script><template>  <input    :value="props.modelValue"    @input="emit('update:modelValue', $event.target.value)"  /></template>

而<Child v-model="msg" />又作了什么事？其实一样，就是v-on & v-bind，只是现在bind的是child里定义的prop，on的是child定义的emit。

好高兴在这样的夜，听着Gummy B想通了这一切，虽然大部分的内容其实文件里都有 XD