Vue组件之双向绑定v-model

1. 父组件

<template>
  <div>{{title}}div>
  
  <input v-model="title">
  <div>对象的title{{obj.title}}div>
  <br>
  
  <classtest  v-model="count" v-model:title="title" v-model:name="name" v-model:obj="obj" />
template>
<script setup>
import { reactive, ref } from "vue";
import classtest from "./components/classtest.vue";
let count = ref(1);
//这里没有传值,是因为其子组件设置了默认值为1
let title=ref()
let name=ref('这里是姓名')
let obj=reactive({
  title:'这里是对象的title',
  name:'这里是对象的name'
})
script>
<style scoped>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

2. 子组件

<template>
  <div>parent bound v-model is: {{ model }}div>
  <br>
  
  <input v-model="title">
  <br>
  <input v-model="name">
  <br>
  
  <input v-model="obj.title">
  <br>
  <input v-model="obj.name">
  <br>
  
  <input v-if="name1" v-model="name1">
template>

<script setup>
let model=defineModel()
//接收父组件传过来的v-model:title的值,并且设置默认值为1
let title=defineModel('title',{ default: 1 })
//接收父组件传过来的v-model:name的值,并且设置为必填
let name=defineModel('name',{ required: true })
//这个没有在父组件传递,但是不会报错
let name1=defineModel('name1')
//接收父组件传过来的v-model:obj的值,其为一个对象
let obj=defineModel('obj')
script>

<style>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

3. Get,Set
父控件

<template>
  <div>{{title}}div>
  
  <classtest  v-model.capitalize:title="title"  />
template>
<script setup>
import { reactive, ref } from "vue";
import classtest from "./components/classtest.vue";
let count = ref(1);
//这里没有传值,是因为其子组件设置了默认值为1
let title=ref('这里是姓名')

script>
<style scoped>
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

子控件

<template>
  <input v-model="title">
template>

<script setup>
//第一个参数为双向绑定的值
//第二个参数为父组件v-model的修饰符
let [title,modifiers]=defineModel({
  //modifiers的值为{capitalize:title: true}
  set(value){
    console.log(modifiers)
    if ('modifiers.capitalize:title') {
      //把第一个字母转换为大写
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
    return value
  },
})
script>

<style>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22