Vue面试题06：Vue子组件是否可以修改父组件的数据？

Vue子组件是否可以修改父组件的数据？

• 可以修改但不推荐：首先，文档中指出组件开发需要遵循单向数据流原则：即所有的 props 都遵循着单向绑定的原则，props 因父组件的更新而变化，避免了子组件意外修改父组件的状态的情况，不然应用的数据流将很容易变得混乱而难以理解。如果直接修改子组件props，vue会报错；

• 如果是鉴于以下两种需求更改prop，则建议如下：

  • prop 被用于传入初始值；而子组件想在之后将其作为一个局部状态：这时在子组件定义一个局部变量保存prop初始值即可：

    const props = defineProps(['initialCounter'])
    const counter = ref(props.initialCounter)
    

  • 需要对传入的 prop 值做进一步的转换：这时基于该 prop 值定义一个计算属性即可：

    const props = defineProps(['size'])
    const normalizedSize = computed(() => props.size.trim().toLowerCase())
    

• 多数情况下子组件应该抛出一个事件来通知父组件做出改变，以Vue2中sync修饰符结合自定义事件为例：

  //父组件
  <Dialog :show.sync="show"></Dialog>
  //子组件
  <el-button @click="$emit('update:show', false)">取 消</el-button>