vue3.2 v-model

注意点：<Children v-model:text='textBoxValue'/> 不能省略v-model,

 <template>
    <h1>Parenth1>
    <h2>{{textBoxValue}}h2>
    <Children v-model:text='textBoxValue'/>
template>

<script setup>
import Children from './Children.vue'

import {ref} from 'vue'

const textBoxValue = ref('空空如也')

script>

<template>
    <input type="text" :value="text" @input="inputEvent" />
template>

<script setup>

defineProps({
    text: String
})

const emits = defineEmits();

const inputEvent = (e) => {
    console.log(e.target.value);
    emits('update:text', e.target.value)
}
script>

 传对象时， 如果  不加v-model:text = textBoxValue 属性,运行时报错。

<template>
    <input type="text" :value="text.item1" @input="inputEvent" />
    
template>

<script setup>

const props = defineProps({
    text: Object,
})

const emits = defineEmits();

const inputEvent = (e) => {
    console.log(e.target.value);
    emits('update:text', {item1: e.target.value, item2: props.text.item2+'123'})
    // emits('update:text', {item1: props.text.item1, item2: props.text.item2})
}
script>

<template>
    <h1>Parenth1>
    <h2>{{textBoxValue.item1}}h2>
    <h2>{{textBoxValue.item2}}h2>
    <Children v-model:text='textBoxValue'/>
    
template>

<script setup>
import Children from './Children.vue'

import {ref} from 'vue'

const textBoxValue = ref({
    item1: "item1",
    item2: "item2"
})

script>