Vue——子组件可以修改父组件数据吗

分析

这是一个实践知识点，组件化开发过程中有个单向数据流原则，不在子组件中修改父组件数据是个常识问题。

回答思路

1. 讲讲单项数据流原则，表明为何不能这么做
2. 举几个常见场景的例子说说解决方案
3. 结合实践讲讲如果需要修改父组件状态应该如何做

回答范例

1. prop 会使父子间形成一个单向的下行绑定：父级 prop 的更新会向下流动到子组件中，但子组件数据不能流向到父组件中，这样做是为了防止子组件意外变更父级组件的状态，从而导致的数据流向难以理解、不好维护、出了问题不好找错等问题。
   
2. 实际开发过程中需要修改prop的两个场景：
   

• ❓场景1：这个 prop 用来传递一个初始值，这个子组件接下来希望将其作为一个本地的 prop 数据来使用。
  
• ✅解决办法：最好定义一个本地的 data，并将这个 prop 用作其初始值：
  const props = defineProps(['某变量'])
const counter = ref(props.某变量)
  
• ❓场景2：这个 prop 以一种原始的值传入且需要进行转换。
  
• ✅解决办法：最好使用这个 prop 的值来定义一个计算属性：
  const props = defineProps(['某变量']) // prop变化，计算属性自动更新
const 某计算属性 = computed(() => props.某变量.trim().toLowerCase())
  

3. 实践中如果确实想要改变父组件属性应该emit一个事件让父组件去做这个变更。
   注意虽然我们不能直接修改一个传入的对象或者数组类型的prop，但是我们还是能够直接改内嵌的对象或属性。