v-model原理演示

个人学习笔记保存，写不来文章供大家学习，因此自己看的懂就行，误入来的朋友勿喷。

父组件

<script setup lang="ts">
import { ref } from "vue";
import ViewModelChild from "./ViewModelChild.vue";

const viewModelValue = ref("双向绑定默认值");
</script>

<template>
  <ViewModelChild
    :modelValue="viewModelValue"
    @update:modelValue="viewModelValue = $event"
  />
  <div>{{ viewModelValue }}</div>

  <ViewModelChild v-model="viewModelValue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

子组件

<script setup lang="ts">
defineProps<{
  modelValue: string;
}>();

// defineProps(["modelValue"]);

const emit = defineEmits(["update:modelValue"]);
</script>

<template>
  <div class="father">
    <div>演示viewmodel原来</div>
    <input
      type="text"
      :value="modelValue"
      placeholder="请输入内容"
      placeholder-class="input-placeholder"
      @input="
        emit('update:modelValue', (<HTMLInputElement>$event.target).value)
      "
    />
    <div>{{ modelValue }}</div>
  </div>
</template>

<style lang="scss" scoped>
.father {
  display: flex;
  flex-direction: column;
  background-color: brown;
  padding: 30px;
  font-style: italic;
  color: #ffffff;
}
</style>