VUE3的v-mode双向绑定事件通信

最新推荐文章于 2024-10-07 09:24:46 发布

前端小云儿

最新推荐文章于 2024-10-07 09:24:46 发布

阅读量78

点赞数 1

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

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

版权

vue3知识点专栏收录该内容

72 篇文章 2 订阅 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文详细探讨了Vue3中v-model的使用，包括如何实现父组件与子组件之间的双向数据绑定，以及这一特性在实际开发中的应用。通过实例解析，展示了v-model在父子组件通信中的强大功能。

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

父组件

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

<template>
  <h1>v-madel</h1>
  <h1>1 收集表单数据，数据双向绑定</h1>
  <h1>2 可以实现父子组件之间通信，数据同步</h1>
  <div></div>
  <div>v-model="money" 这一句相当于下面两句</div>
  <h1>给子组件传递一个值props[modelValue]=100</h1>
  <h1>给子组件绑定一个自定义事件update:modelValue</h1>
  <h4 style="color: red; font-size: 20px">父组件：{
  { money }}</h4>
  <appCHILD1 v-model="money"></appCHILD1>
</template>
<style scoped>&l

了解本专栏