vue3 v-model

v-model 一个对象

// HomeView.vue

<script setup>
import { reactive } from 'vue'
import VInput from '../components/VInput.vue'
import type { UserInfo } from '../typings/user'

const userInfo = reactive<UserInfo>({
  userName: '',
})
</script>

<template>
  <div>Home: {{ userInfo.userName }}</div>
  <VInput :userInfo="userInfo" />
</template>


// VInput.vue

<template>
  <input v-model="userInfo.userName" />
  <span>{{ props.userInfo.userName }}</span>
</template>

<script setup lang="ts">
import { computed, ref, toRefs } from 'vue'
import type { UserInfo } from '../typings/user'

interface IProps {
  userInfo: UserInfo
}
const props = defineProps<IProps>()

const { userInfo } = toRefs(props)
// const userInfo = ref(props.userInfo)
// const userInfo = computed(() => props.userInfo)// 这三种都可以，推荐第一种

console.log(userInfo.value === props.userInfo) // true
</script>

子组件的v-model 相当于直接修改父组件的对象地址的数据

// typings/user.ts

export interface UserInfo {
  userName: string
}

v-model 一个字符串

// HomeView.vue

<script setup>
import { ref } from 'vue'
import VInput from '../components/VInput.vue'
import type { UserInfo } from '../../typings/user'

const userInfo = ref<UserInfo>('')
</script>

<template>
  <div>Home: {{ userInfo.userName }}</div>
  <VInput v-model:userInfo="userInfo" />
</template>


// VInput.vue

<template>
  <input v-model="userInfo" />
  <span>{{ props.userInfo }}</span>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { UserInfo } from '../../typings/user'

interface IProps {
  userInfo: UserInfo
}

const props = defineProps<IProps>()
const emit = defineEmits(['update:userInfo'])

const userInfo = computed({
  get() {
    return props.userInfo
  },
  set(value) {
    emit('update:userInfo', value)
  }
})

</script>

// typings/user.ts

export type UserInfo = string