一、组件直接传值
大家都知道父子组件传值的方案，有以下几个，不再详细敖述
Props：父组件向子组件传递数据
$emit：子组件通过自定义事件向父组件传递数据
.sync修饰符：一个方便且强大的工具，可以简化父子组件之间的双向数据绑定，用于创建双向绑定prop的修饰符，它允许子组件更新父组件的prop值，实现父子组件之间的双向数据同步（如果不想使用事件），
.sync修饰符的工作原理主要基于Vue.js的事件机制和prop传递机制Vuex进行状态管理：应用提供了一种高效、清晰的状态管理方案。通过集中式存储管理、可预测的状态变化、组件间的解耦以及方便的调试工具等特性，Vuex极大地简化了应用程序的状态管理。
provide/inject：是Vue.js中一种强大的机制，用于实现跨组件的数据共享和方法传递。它们能够有效地避免繁琐的props传递，提升组件间通信的灵活性和代码的可维护性。然而，在使用时需要注意响应性问题、命名冲突以及性能开销等细节。
Bus事件：Bus事件适用于简单的场景或临时解决方案，如果在组件销毁后没有移除事件监听器，可能会导致内存泄漏。因此，在组件销毁之前，应该使用
$off方法来移除事件监听器。refs或parent/$children访问组件实例，父组件可以通过$refs直接访问子组件的数据或方法；父组件可以通过children访问子组件，子组件可以通过parent访问父组件，从而实现父子组件之间的数据传递。但这种方式会破坏组件的封装性和独立性，因此应尽量避免过多使用。
二、 子组件改变父组件的值
子组件通过自定义事件向父组件传递数据，来让父组件改变值，是正规使用,，其中.sync修饰符同步父组件值，是综合版本，不过有以下两种情况是不被推荐，尤其直接改变非对象属性
- 子组件直接改变了父组件里面的对象：因为是对象里面的属性，没有直接触发该对象属性的 setter，只是在修改对象内部的引用，而这个内部引用并没有被 Vue 的响应式系统所追踪。因此，从技术上讲，Vue 不知道这个内部属性已经被修改，也就不会触发视图更新，也就不会报错。（不会报错）
- 直接修改父组件非对象属性就会直接触发 setter引发报错Avoid mutating a prop...（报错）
父组件
<template>
<div>
<child-component :parentMessage="parentMessage" :form="form" @setParentMessage="setParentMessage" :form.sync="form"></child-component>
</div>
</template>
<script>
export default {
data() {
return {
parentMessage: 'Hello from parent!',
form:{user:'默认'}
};
},
methods: {
setParentMessage(msg) {
this.parentMessage = msg//推荐
}
}
}
</script>子组件
<template>
<div>
<p @click="sendUpdate">{{ parentMessage }}</p>
</div>
</template>
<script>
export default {
props: {
parentMessage: String,
form: Object
},
methods: {
sendUpdate(data) {
this.form.us='不报错'//只是在修改对象内部的引用，而这个内部引用并没有被 Vue 的响应式系统所追踪。因此，从技术上讲，Vue 不知道这个内部属性已经被修改，也就不会触发视图更新，也就不会报错。
this.parentMessage='报错'//Avoid mutating a prop...
//推荐:子组件通过自定义事件向父组件传递数据，来让父组件改变值，是正规使用
this.$emit('setParentMessage', '自定义事件传递数据');
//推荐:.sync修饰符同步父组件值
const form = { ...this.form };
form.us = '.sync修饰符同步父组件值';
this.$emit('update:form', form);
//当然这样做可能会使代码变得难以理解和维护，特别是在大型应用程序中。
//更好的做法是遵循Vue的最佳实践，即不要直接修改prop。
this.form.us = '.sync修饰符同步父组件值';
this.$emit('update:form', this.form);
}
}
}
</script>
