✅ example of model bi-binding

Author: trydofor

plays/1-play-spa/components/ModelNew.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="border border-solid p-4 border-1">
+    New defineModel is: {{ model }}
+  </div>
+  <div class="border border-solid cursor-pointer p-4 border-1" @click="update">
+    👶 Child ++
+  </div>
+</template>
+
+<script lang="ts" setup>
+const model = defineModel<number>({ default: 0 });
+// const loading1 = defineModel<boolean>({ default: false });
+// const loading2 = defineModel<boolean>('loading', { required: true });
+
+function update() {
+  increase(model);
+}
+
+function increase(value:Ref<number>){
+  value.value++;
+}
+</script>

plays/1-play-spa/components/ModelOld.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="border border-solid p-4 border-1">
+    Old props+emits is: {{ model }}
+  </div>
+  <div class="border border-solid cursor-pointer p-4 border-1" @click="update">
+    👶 Child ++
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{ modelValue: number }>();
+const emits = defineEmits<{ 'update:modelValue': [number] }>();
+
+const model = computed({
+  get: () => props.modelValue,
+  set: val => emits('update:modelValue', val),
+});
+
+function update() {
+  increase(model);
+}
+
+function increase(value:Ref<number>){
+  value.value++;
+}
+</script>

plays/2-play-web/pages/14-model-binding.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="flex flex-col gap-4">
+    <div class="border border-solid p-2 border-1 flex flex-col gap-2">
+      <div class="border border-solid p-4 border-1">
+        Parent ModelNew {{ modelNew }}
+      </div>
+      <div class="border border-solid cursor-pointer p-4 border-1" @click="modelNew++">
+        👨🏻 Parent ++
+      </div>
+      <div class="border border-solid cursor-pointer p-4 border-1" @click="modelNew=modelNew+1">
+        👨🏻 Parent + 1
+      </div>
+      <ModelNew v-model="modelNew" />
+    </div>
+    <div class="border border-solid p-2 border-1 flex flex-col gap-2">
+      <div class="border border-solid p-4 border-1">
+        Parent ModelOld {{ modelOld }}
+      </div>
+      <div class="border border-solid cursor-pointer p-4 border-1" @click="modelOld++">
+        👨🏻 Parent ++
+      </div>
+      <div class="border border-solid cursor-pointer p-4 border-1" @click="modelOld=modelOld+1">
+        👨🏻 Parent +1
+      </div>
+      <ModelOld v-model="modelOld" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+definePageMeta({
+  name: 'ModelRef binding',
+});
+
+const modelNew = shallowRef(1000);
+const modelOld = shallowRef(2000);
+</script>