Skip to content

v-model

  • 作用 1:数据双向绑定,收集表单数据
  • 作用 2:在组件身上使用,可以实现父传子数据同步业务

组件使用

  • 相当于给子组件传递 props[modelValue]
  • 相当于给父组件绑定自定义事件 update:modelValue,并且把子组件传的值,赋给当前值
  • 好处:可以省略父组件写自定义方法,代码更加简洁
  • 父组件
vue
<template>
    <div class="father">
        <h2>我是父组件</h2>
        <p>钱数:{{money}}</p>
        <!-- v-model在组件上使用 -->
        <!-- 相当于给子组件传递props[modelValue] -->
        <!-- 相当于给父组件绑定自定义事件update:modelValue,并且把子组件传的值赋给当前值money -->
        <Child1 v-model="money"></Child1>
        <!-- 相当于下面 父传子 + 子传父 -->
        <Child1 :modelValue="money" @update:modelValue="handler"></Child1>
        <!-- 绑定多个参数 -->
        <!-- 相当于给子组件传递props[pageNo,pageSize] -->
        <!-- 相当于给父组件绑定自定义事件update:pageNo、update:pageSize,并且把子组件传的值赋给当前值pageNo,pageSize -->
        <Child1 v-model:pageNo="pageNo" v-model:pageSize="pageSize"></Child1>
    </div>
</template>
ts
<script lang="ts" setup>
import Child1 from './Child1'
import {ref} from 'vue'
const money = ref(1000)
//多个绑定
const pageNo = ref(1)
const pageSize = ref(100)
</script>
  • 子组件 Child
vue
<template>
    <div class="son">
        <h2>我是子组件</h2>
        <p>{money}</p>
        <button @click="handler">给父组件传值</button>
    </div>
</template>
ts
<script lang="ts" setup>
let props = defineProps(["money","pageNo","pageSize"])
let $emit = defineEmits(["update:money","update:pageNo","update:pageSize"])
const handler = ()=>{
    //给父组件传值
    $emit('update:money',props.money + 1000)
    $emit('update:pageNo',props.pageNo + 1)
    $emit('update:pageSize',props.pageSize + 100)
}
</script>