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>
相关推荐
叫我少年3 小时前
Vue3 集成 VueRouter
vue.js
接着奏乐接着舞。3 小时前
3D地球可视化教程 - 第3篇:地球动画与相机控制
前端·vue.js·3d·threejs
正在走向自律3 小时前
RSA加密从原理到实践:Java后端与Vue前端全栈案例解析
java·前端·vue.js·密钥管理·rsa加密·密钥对·aes+rsa
LuckySusu3 小时前
【vue篇】Vue 数组响应式揭秘:如何让 push 也能更新视图?
前端·vue.js
LuckySusu3 小时前
【vue篇】Vue 性能优化神器:keep-alive 深度解析与实战指南
前端·vue.js
LuckySusu3 小时前
【vue篇】Vue 核心机制揭秘:为什么组件的 data 必须是函数?
前端·vue.js
LuckySusu3 小时前
【vue篇】Vue 响应式陷阱:动态添加对象属性为何不更新?如何破解?
前端·vue.js
LuckySusu3 小时前
【vue篇】Vue 异步更新之魂:$nextTick 原理与实战全解
前端·vue.js
LuckySusu3 小时前
【vue篇】Vue 条件渲染终极对决:v-if vs v-show 深度解析
前端·vue.js