Vue3 v-model 原理解析，组件v-model使用

wujf90

于 2024-07-02 16:01:17 发布

阅读量145

点赞数 2

分类专栏： Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/wujf90/article/details/140129326

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

Father.vue

<template>
  <div>
    <!-- v-model用在html上 -->
    <!-- <input type="text" v-model="userName"> -->
    <!-- 实际原理 -->
    <!-- <input type="text" :value="userName" @input="userName = (<HTMLInputElement>$event.target).value"> -->

    <!-- v-model用在组件上 -->
    <Myinput v-model="userName"/>
    <Myinput :modelValue="userName" @update:modelValue="userName = $event"/>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Myinput from './MyInput.vue'
const userName = ref('父组件')
</script>

<style scoped>

</style>

MyInput.vue

<template>
  <div>
    <input type="text" :value="modelValue" @input="emit('update:modelValue', (<HTMLInputElement>$event.target).value)">
  </div>
</template>

<script setup lang="ts">
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

<style scoped>

</style>