@Prop调父组件修改子组件

@Prop是Vue.js中用于接收父组件传递的props的装饰器。根据引用内容，Vue不推荐直接在子组件中修改父组件传来的props的值，因为这样做会导致警告和潜在的问题。相反，Vue建议使用data或computed属性来处理子组件中的数据。

以下是两种常用的方式来调用父组件修改子组件的props：

1. 通过父组件on监听子组件emit事件实现修改prop：

// 子组件
<template>
  <button @click="updateProp">修改prop</button>
</template>

<script>
export default {
  props: ['propValue'],
  methods: {
    updateProp() {
      this.$emit('update:propValue', newValue);
    }
  }
}
</script>

// 父组件
<template>
  <child-component :propValue="propValue" @update:propValue="propValue = $event"></child-component>
</template>

<script>
export default {
  data() {
    return {
      propValue: '初始值'
    }
  }
}
</script>

2. 通过父组件sync修饰符 + 子组件emit事件实现修改prop：

// 子组件
<template>
  <button @click="updateProp">修改prop</button>
</template>

<script>
export default {
  props: ['propValue'],
  methods: {
    updateProp() {
      this.$emit('update:propValue', newValue);
    }
  }
}
</script>

// 父组件
<template>
  <child-component :propValue.sync="propValue"></child-component>
</template>

<script>
export default {
  data() {
    return {
      propValue: '初始值'
    }
  }
}
</script>