vue中.sync修饰符与$emit(update：xxx)双向数据绑定

小马甲丫

已于 2024-02-26 18:09:18 修改

阅读量2.1k

点赞数 22

CC 4.0 BY-SA版权

分类专栏： # vue 文章标签：前端 javascript vue

于 2023-12-01 00:15:00 首次发布

本文链接：https://blog.youkuaiyun.com/u012804440/article/details/134698890

本文详细介绍了Vue中单向数据流的概念，然后深入探讨了父子组件间的通信，包括如何通过自定义事件进行值的传递与修改。接着，重点讨论了.sync修饰符的使用，它提供了一种简化双向数据绑定的语法糖，简化了代码，但也存在数据绑定不明确和潜在的性能问题。文章最后总结了优缺点并鼓励读者反馈意见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、单向数据流

所有的 props 都遵循着单向绑定原则，props 因父组件的更新而变化，自然地将新的状态向下流往子组件，而不会逆向传递。这避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。另外，每次父组件更新后，所有的子组件中的 props 都会被更新到最新值，这意味着你不应该在子组件中去更改一个 prop。

正常的父子组件传值及修改值，需要props传递属性到子组件，然后需要子组件触发自定义事件到父组件去改值。

二、`props`父子传值

2.1、父组件

在父组件中定义数据及传递给子组件

接收自定义事件，在自定义事件中修改值

<template>
	<div>
		<child :title="title" @change="changeTitle"></child>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				title:"old title"
			}
		},
        methods: {
            // 最鸡肋的就是这个环节
            changeTitle(e) {
                this.title = e // new title
            }
        }
	}
</script>