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

文章目录

• 一、单向数据流
• 二、`props`父子传值
• • 2.1、父组件
  • 2.2、子组件
  • 2.3、优缺点
  • • 2.3.1、优点
    • 2.3.2、缺点
• 三、`.sync`修饰符双向绑定
• • 3.1、父组件
  • 3.2、子组件
  • 3.3、优缺点
  • • 3.3.1、优点
    • 3.3.2、缺点
  • 3.4、文档(https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6))
• 四、最后

一、单向数据流

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

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

二、props父子传值

2.1、父组件

1. 在父组件中定义数据及传递给子组件
2. 接收自定义事件，在自定义事件中修改值

<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>

2.2、子组件

1. 子组件中接收数据，定义触发修改值的方法及$emit触发自定义事件携带参数到父组件

<template>
	<div>
		<div @click="changeTitle">{{title}}</div>
	</div>
</template>
<script>
	export default {
		props: {
			title: {
				default: "old title"
			},
		},
		methods: {
			changeTitle(){
				// 触发一个更新事件
				this.$emit('change:title',"new title")
			}
		}
	}
</script>

2.3、优缺点

2.3.1、优点

明确的数据流 ：props通过显式地传递数据，使得数据的来源和使用更加清晰明确。
数据单向流动 ：props的数据只能由父组件向子组件传递，避免了数据的混乱和不可预测性。
较好的可维护性 ：props作为接口定义，可以提高组件的可维护性和可复用性。

2.3.2、缺点

相对繁琐 ：对于较为复杂的数据传递和组件间的通信，需要通过定义多个props，增加了代码的复杂度。
需要额外的事件机制：子组件需要通过事件或方法通知父组件进行数据更新，增加了一定的开发成本和复杂度。

三、.sync修饰符双向绑定

3.1、父组件

<template>
	<div>
		<child :title.sync="title" />
	</div>
</template>
<script>
	export default {
		data() {
			return {
				title:"old title"
			}
		}
	}
</script>

3.2、子组件

<template>
	<div>
		<div @click="changeTitle">{{title}}</div>
	</div>
</template>
<script>
	export default {
		props: {
			title: {
				default: "old title"
			},
		},
		methods: {
			changeTitle(){
				// 触发一个更新事件
				this.$emit('update:title',"new title")
			}
		}
	}
</script>

3.3、优缺点

3.3.1、优点

对比props父子传值及.sync修饰符双向绑定，最直观的感受就是代码简化了
.sync 修饰符实质就是父组件监听子组件更新某个props的请求的缩写语法，一种语法糖。

简洁的语法 ：使用.sync修饰符可以简洁地实现父子组件的双向数据绑定。
方便的数据更新：子组件可以直接修改父组件的数据，子组件的变化会直接影响到父组件中对应的数据。

:title.sync="title"
// 写法等同于
:title="title"
@update:title="title = $event"

3.3.2、缺点

数据绑定不够明确 ：由于子组件可以直接修改父组件的数据，可能导致数据变得不可预测，增加了调试和维护的难度。
双向绑定可能带来性能问题：频繁的数据变动可能导致性能问题，需要合理控制双向绑定的使用。

3.4、文档

四、最后

本人每篇文章都是一字一句码出来，希望大佬们多提提意见。顺手来个三连击，点赞👍收藏💖关注✨。创作不易，给我打打气，加加油☕