VUE3的v-model双向绑定事件通信绑定多个，（子传父，父传子）

前端小云儿

已于 2024-03-19 14:50:13 修改

阅读量291

点赞数 1

分类专栏： vue3知识点文章标签： javascript 前端 vue.js

于 2024-02-13 13:42:19 首次发布

本文链接：https://blog.csdn.net/jieweiwujie/article/details/136106583

版权

vue3知识点专栏收录该内容

78 篇文章 2 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了Vue3中v-model的使用，特别是在子组件与父组件间实现双向绑定的事件通信。通过核心代码展示，解释了如何在子组件中定义props和emit，以支持同时绑定多个v-model，从而实现数据的双向流动。

摘要由CSDN通过智能技术生成

1基本写法

父组件

<script setup>
import { ref } from 'vue'
import appCHILD1 from './appChild1.vue'
let pagesize = ref(1)
let pageNum = ref(10)
const clickAdd = (val) => {
  money.value = val
}
</script>

<template>
  <h1>v-madel</h1>
  <h1>1 收集表单数据，数据双向绑定</h1>
  <h1>2 可以实现父子组件之间通信，数据同步</h1>
  <div></div>
  <button>点击增加</button>
  <div style="color: blue; font-size: 20px">父组件 v-model：pagesize-{
  { pagesize }}</div>
  <div style="color: blue; font-size: 20px">父组件 v-model：pageNum-{
  { pageNum }}</div>
  <appCHILD1 v-model:pagesize="pagesize" v-model:pageNu

了解本专栏