Vue3组件数据双向绑定

在Vue的组件中,我们可以使用props将父组件的数据传递给子组件,父组件中的数据发生变化后,子组件也会跟着改变,但是props是向下绑定的,就是说当子组件的数据发生变化时,父组件不会改变。

为了能够在子组件中修改父组件的数据,我们可以使用 v-model 对组件间的数据进行双向绑定,在父组件或子组件中进行数据修改时都会引起对方的数据变化。

下面介绍使用 v-model 进行数据双向绑定的使用。

基础用法

在使用数据双向绑定时,需要自定义一个组件:

javascript 复制代码
<!-- 子组件 -->

<template>
  <input v-model="value">
</template>

<script setup>

const value = defineModel()

</script>

<style lang='scss' scoped>

</style>

在子组件中,使用 const value = defineModel() 声明双向数据绑定,defineModel() 返回的是一个ref,可以像其他ref一样访问或修改。

同时,需要一个父组件调用子组件,并传递双向绑定的数据。

javascript 复制代码
<!-- 父组件 -->

<template>
  <p>{{ value }}</p>
  <Child v-model="value"></Child>
</template>

<script setup>
import { ref } from 'vue';
import Child from '../../components/TestChild/index.vue'

const value = ref('abcde')

</script>

<style lang='scss' scoped>

</style>

在子组件上使用 v-model 将父组件的value与子组件双向绑定,子组件输入框修改时,父组件的value会一起改变。

v-model 的参数

组件上的 v-model 可以接收一个参数。同时,在子组件中,使用字符串传递给 defineModel() 以支持相应的参数。

javascript 复制代码
<!-- 子组件 -->

<template>
  <input v-model="value">
</template>

<script setup>

const value = defineModel('value')

</script>

<style lang='scss' scoped>

</style>
javascript 复制代码
<!-- 父组件 -->

<template>
  <p>{{ value }}</p>
  <Child v-model:value="value"></Child>
</template>

<script setup>
import { ref } from 'vue';
import Child from '../../components/TestChild/index.vue'

const value = ref('abcde')

</script>

<style lang='scss' scoped>

</style>
多个 v-model 绑定

在 v-model 的参数的基础上,我们可以单个组件实例上创建多个 v-model 双向绑定。

只需使用不同的参数便可以实现多个数据双向绑定。

javascript 复制代码
<!-- 子组件 -->

<template>
  <input v-model="value1">
  <input v-model="value2">
</template>

<script setup>

const value1 = defineModel('value1')
const value2 = defineModel('value2')

</script>

<style lang='scss' scoped>
  input {
    display: block;
  }
</style>
javascript 复制代码
<!-- 父组件 -->

<template>
  <p>{{ value1 }}</p>
  <p>{{ value2 }}</p>
  <Child 
  v-model:value1="value1"
  v-model:value2="value2"
  ></Child>
</template>

<script setup>
import { ref } from 'vue';
import Child from '../../components/TestChild/index.vue'

const value1 = ref('abcde')
const value2 = ref('sdvhj')

</script>

<style lang='scss' scoped>

</style>

结果:

相关推荐
阿珊和她的猫3 分钟前
深入理解与手写发布订阅模式
开发语言·前端·javascript·vue.js·ecmascript·状态模式
yinuo12 分钟前
一行 CSS 就能搞定!用 writing-mode 轻松实现文字竖排
前端
snow@li44 分钟前
html5:拖放 / demo / 拖放事件(Drag Events)/ DataTransfer 对象方法
前端·html·拖放
爱看书的小沐1 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
qq_398586541 小时前
Threejs入门学习笔记
javascript·笔记·学习
浪裡遊2 小时前
Nivo图表库全面指南:配置与用法详解
前端·javascript·react.js·node.js·php
課代表2 小时前
JavaScript 二维数组的三种定义与初始化方法
javascript·初始化·二维数组·多维数组·动态数组·循环遍历·数组合并
鸡吃丸子3 小时前
Next.js 入门指南
开发语言·javascript·next.js
罚时大师月色3 小时前
Vue+ts 如何实现父组件和子组件通信
javascript·vue.js·ecmascript
漂流瓶jz3 小时前
快速定位源码问题:SourceMap的生成/使用/文件格式与历史
前端·javascript·前端工程化