Vue单向数据流下双向绑定父子组件数据

单向数据流

Vue遵循单向数据流原则,父组件向子组件传递props,子组件不能更改props,否则会报错,也即数据只能由父组件流向子组件,子组件不能修改父组件数据。

双向数据绑定

那么在一些场景下,如弹窗场景,子组件的确需要更新父组件数据,要怎么处理呢?Vue推荐是父组件使用props传递数据给子组件,子组件再通过自定义事件通知父组件修改数据,这样一来数据就始终是由父组件控制的了。

xml 复制代码
<!-- 父组件 -->
<template>
  <button @click="show = true">打开</button>
  <Dialog
    :show="show"
    @update:show="e => show = e"
  >
  </Dialog>
</template>
<script>
  export default{
    data(){
      return {
        show: false
      }
    }
  }
</script>
xml 复制代码
<!-- 子组件 -->
<template>
  <div v-if="show">
    <button @click="$emit('update:show', false)">关闭</button>
  </div>
</template>
<script>
  export default {
    props: {
      show: {
        type: Boolean,
        default: false
      }
    }
  }
</script>

Vue2使用.sync语法糖

在Vue2中提供了修饰符.sync作为双向数据绑定的语法糖,使用.sync修饰符,父组件可以写为

ini 复制代码
<Dialog :show.sync="show"></Dialog>

子组件不变,同样通过this.$emit更新数据。

Vue3使用v-model

Vue3中则是移除了.sync修饰符,选择用v-model实现双向数据绑定,在Vue3中可以写成

ini 复制代码
<Dialog v-model:show="show"></Dialog>

子组件中同样通过emit自定义事件更新数据,注意Vue3中不能用this.$emit,而是要defineEmits(["update:show"])定义事件。

xml 复制代码
<!-- 子组件 -->
<template>
  <div v-if="show">
    <button @click="$emit('update:show', false)">关闭</button>
  </div>
</template>
<script setup>
  import { defineEmits } from "vue"
  const $emit=defineEmits(['update:show'])
</script>

defineModel

在Vue3.4+中还提供了defineModel宏,使得双向绑定的实现更加简洁,在使用子组件时直接defineModel声明一个model prop,这样,在子组件内部直接修改这个声明的值就会自动触发update事件。

如果第一个参数是一个字符串字面量,它将被用作 prop 名称;否则,prop 名称将默认为 "modelValue"。

xml 复制代码
<!-- 子组件 -->
<template>
  <div v-if="show">
    <button @click="show=false">关闭</button>
  </div>
</template>
<script setup>
 const show=defineModel('show',{type: Boolean,default: false})
</script>
相关推荐
Sheldon一蓑烟雨任平生4 小时前
Vue3 依赖注入(provide 和 inject)
vue.js·inject·provide·vue3 依赖注入·跨级别组件通信
paopaokaka_luck5 小时前
基于SpringBoot+Vue的助农扶贫平台(AI问答、WebSocket实时聊天、快递物流API、协同过滤算法、Echarts图形化分析、分享链接到微博)
java·vue.js·spring boot·后端·websocket·spring
Sheldon一蓑烟雨任平生6 小时前
Vue3 重构待办事项(主要练习组件化)
vue.js·重构·vue3·组件化练习
zuo-yiran10 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_3168377510 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
abiao198111 小时前
VUE的“单向数据绑定” 和 “双向数据绑定”
前端·javascript·vue.js
麦麦大数据12 小时前
F042 A星算法课程推荐(A*算法) | 课程知识图谱|课程推荐vue+flask+neo4j B/S架构前后端分离|课程知识图谱构造
vue.js·算法·知识图谱·neo4j·a星算法·路径推荐·课程推荐
拉不动的猪12 小时前
多窗口数据实时同步常规方案举例
前端·javascript·vue.js
南清的coding日记12 小时前
Java 程序员的 Vue 指南 - Vue 万字速览(01)
java·开发语言·前端·javascript·vue.js·css3·html5
Xiaouuuuua12 小时前
2026年计算机毕业设计项目合集
前端·vue.js·课程设计