本节主要探讨父子组件使用v-model绑定数据的方式。由于props是单向数据流，因此子组件不可能直接修改来自父组件的props，必须使用自定义事件的方式进行修改。不同的是事件名需要采用Vue3特定的格式update:v-model绑定变量的名字，回调由Vue3事先定义完毕
一个简单的例子：
App.vue
<template>
<div>
<div>我是App.vue父组件</div>
{{ isShow }}
<button @click="isShow = !isShow">开关</button>
<br>
{{ textValue }}
<!-- 这样的写法相当于v-model:value="isShow" -->
<A v-model="isShow"></A>
{{ bt }}
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from './components/A.vue'
let isShow = ref<boolean>(true)
</script>
<style scoped></style>A.vue
<template>
<div v-if="props.modelValue" class="box">
<div>
<div class="close"><button @click="close">关闭</button></div>
<h3>我是v-model子组件</h3>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const props = defineProps<{
// 组件身上的value默认名字是modelValue
modelValue: boolean,
}>()
// 固定事件名写法,格式为update:我们要暴露出去的名字
const emit = defineEmits(['update:modelValue'])
const close = () => {
// 通过emit触发事件改变父组件的值,但这个事件名的回调是vue写好的,将第二个参数赋给冒号后面的变量
emit('update:modelValue',false)
}
</script>
<style scoped>
.box {
width: 500px;
height: 200px;
border: 5px solid #ccc;
}
.close {
display: flex;
flex-direction: row-reverse;
}
h3 {
margin-top: 0;
}
button {
margin: 10px 10px 0 0;
}
</style>
除了直接使用v-model外，我们也可以自定义绑定的变量名
App.vue
<template>
<div>
<div>我是App.vue父组件</div>
{{ isShow }}
<button @click="isShow = !isShow">开关</button>
<br>
{{ textValue }}
<A v-model:text="textValue"></A>
{{ bt }}
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from './components/A.vue'
let textValue = ref<string>('小满')
</script>
<style scoped></style>A.vue
<template>
<div v-if="props.modelValue" class="box">
<div>
<div class="close"><button @click="close">关闭</button></div>
<h3>我是v-model子组件</h3>
</div>
<span>内容：</span><input type="text" @input="change" :value="props.text"/>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const props = defineProps<{
// 自定义参数名
text:string,
}>()
// 固定事件名写法,格式为update:我们要暴露出去的名字
const emit = defineEmits(['update:text'])
const close = () => {
// 通过emit触发事件改变父组件的值,但这个事件名的回调是vue写好的,将第二个参数赋给冒号后面的变量
emit('update:modelValue',false)
}
// 将input的value值回传给父组件
const change = (e:Event) => {
const target = <HTMLInputElement>e.target
emit('update:text',target.value)
}
</script>
<style scoped>
.box {
width: 500px;
height: 200px;
border: 5px solid #ccc;
}
.close {
display: flex;
flex-direction: row-reverse;
}
h3 {
margin-top: 0;
}
button {
margin: 10px 10px 0 0;
}
</style>
此外，Vue3还支持自定义事件修饰符，其表示方法为props绑定的变量名+Modifiers，如果修饰符是可选的还要在后面加上?可选链操作符，具体例子如下：
App.vue
<template>
<div>
<div>我是App.vue父组件</div>
{{ isShow }}
<button @click="isShow = !isShow">开关</button>
<br>
{{ textValue }}
<A v-model:bt.isBT="bt"></A>
{{ bt }}
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from './components/A.vue'
let bt = ref<string>('默认的bt')
</script>
<style scoped></style>
A.vue
<template>
<div v-if="props.modelValue" class="box">
<div>
<div class="close"><button @click="close">关闭</button></div>
<h3>我是v-model子组件</h3>
</div>
<span>内容：</span><input type="text" @input="change" :value="props.text"/>
<button @click="call">回传修饰符</button>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const props = defineProps<{
// v-model绑定的bt字符串变量
bt:string
// 自定义修饰符,因为是可选的,所以加上?操作符
btModifiers?:{
isBT:boolean // true代表有isBT修饰符，false代表没有
}
}>()
// 固定事件名写法,格式为update:我们要暴露出去的名字
const emit = defineEmits(['update:bt'])
const close = () => {
// 通过emit触发事件改变父组件的值,但这个事件名的回调是vue写好的,将第二个参数赋给冒号后面的变量
emit('update:modelValue',false)
}
// 点击按钮给父组件返回数据。如果存在isBT修饰符就返回小满是BT,如果不存在就返回我是BT
const call = () => {
// btbtModifiers仅判断修饰符是否存在,事件需要定义在bt身上
emit('update:bt',props.btModifiers?.isBT ? '小满是BT' : props.bt)
}
</script>
<style scoped>
.box {
width: 500px;
height: 200px;
border: 5px solid #ccc;
}
.close {
display: flex;
flex-direction: row-reverse;
}
h3 {
margin-top: 0;
}
button {
margin: 10px 10px 0 0;
}
</style>
完整代码：
App.vue
<template>
<div>
<div>我是App.vue父组件</div>
{{ isShow }}
<button @click="isShow = !isShow">开关</button>
<br>
{{ textValue }}
<A v-model:bt.isBT="bt" v-model:text="textValue" v-model="isShow"></A>
{{ bt }}
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import A from './components/A.vue'
let isShow = ref<boolean>(true)
let textValue = ref<string>('小满')
let bt = ref<string>('默认的bt')
// 第二十七章已看完,笔记尚未整理
</script>
<style scoped></style>
A.vue
<template>
<div v-if="props.modelValue" class="box">
<div>
<div class="close"><button @click="close">关闭</button></div>
<h3>我是v-model子组件</h3>
</div>
<span>内容：</span><input type="text" @input="change" :value="props.text"/>
<button @click="call">回传修饰符</button>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
const props = defineProps<{
// 组件身上的value默认名字是modelValue
modelValue: boolean,
// 自定义参数名
text:string,
// v-model绑定的bt字符串变量
bt:string
// 自定义修饰符,因为是可选的,所以加上?操作符
btModifiers?:{
isBT:boolean
}
}>()
// 固定事件名写法,格式为update:我们要暴露出去的名字
const emit = defineEmits(['update:modelValue','update:text','update:bt'])
const close = () => {
// 通过emit触发事件改变父组件的值,但这个事件名的回调是vue写好的,将第二个参数赋给冒号后面的变量
emit('update:modelValue',false)
}
// 将input的value值回传给父组件
const change = (e:Event) => {
const target = <HTMLInputElement>e.target
emit('update:text',target.value)
}
// 点击按钮给父组件返回数据。如果存在isBT修饰符就返回小满是BT,如果不存在就返回我是BT
const call = () => {
// btbtModifiers仅判断修饰符是否存在,事件需要定义在bt身上
emit('update:bt',props.btModifiers?.isBT ? '小满是BT' : props.bt)
}
</script>
<style scoped>
.box {
width: 500px;
height: 200px;
border: 5px solid #ccc;
}
.close {
display: flex;
flex-direction: row-reverse;
}
h3 {
margin-top: 0;
}
button {
margin: 10px 10px 0 0;
}
</style>
