关于Vue的子组件改变父组件传来的值

一、组件直接传值

大家都知道父子组件传值的方案，有以下几个，不再详细敖述

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