Vue 子组件修改prop的值

**Vue 子组件修改 Prop 的值**

在 Vue 中，Prop 是一种用于父子组件通信的机制。然而，在某些情况下，我们可能需要让子组件修改 Prop 的值。这篇文章将探讨如何实现这一点。

###1. 使用 `$emit` 和 `$on`

最简单的方法是使用 `$emit` 和 `$on` 来传递事件。父组件可以通过 `$on` 监听子组件发出的事件，而子组件则可以通过 `$emit` 发出事件来修改 Prop 的值。

html<!-- 父组件 -->
<template>
 <div>
 <child-component :value="value" @update-value="handleUpdateValue"></child-component>
 </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
 components: { ChildComponent },
 data() {
 return {
 value: '初始值'
 }
 },
 methods: {
 handleUpdateValue(newValue) {
 this.value = newValue }
 }
}
</script>

<!-- 子组件 -->
<template>
 <div>
 <button @click="updateValue">更新值</button>
 </div>
</template>

<script>
export default {
 props: ['value'],
 methods: {
 updateValue() {
 this.$emit('update-value', '新值')
 }
 }
}
</script>

在上面的例子中，父组件通过 `$on` 监听子组件发出的 `update-value`事件，而子组件则通过 `$emit` 发出该事件来修改 Prop 的值。

###2. 使用 `sync` 修饰符另一种方法是使用 `sync` 修饰符。这种修饰符可以让子组件直接修改 Prop 的值，而不需要通过事件传递。

html<!-- 父组件 -->
<template>
 <div>
 <child-component :value.sync="value"></child-component>
 </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
 components: { ChildComponent },
 data() {
 return {
 value: '初始值'
 }
 }
}
</script>

<!-- 子组件 -->
<template>
 <div>
 <button @click="updateValue">更新值</button>
 </div>
</template>

<script>
export default {
 props: ['value'],
 methods: {
 updateValue() {
 this.value = '新值'
 }
 }
}
</script>

在上面的例子中，父组件使用 `sync` 修饰符将 Prop 的值传递给子组件，而子组件则直接修改该值。

###3. 使用 `$set` 方法最后一种方法是使用 `$set` 方法。这种方法可以让子组件直接修改 Prop 的值，而不需要通过事件传递或 `sync` 修饰符。

html<!-- 父组件 -->
<template>
 <div>
 <child-component :value="value"></child-component>
 </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
 components: { ChildComponent },
 data() {
 return {
 value: '初始值'
 }
 }
}
</script>

<!-- 子组件 -->
<template>
 <div>
 <button @click="updateValue">更新值</button>
 </div>
</template>

<script>
export default {
 props: ['value'],
 methods: {
 updateValue() {
 this.$set(this, 'value', '新值')
 }
 }
}
</script>

在上面的例子中，父组件将 Prop 的值传递给子组件，而子组件则使用 `$set` 方法直接修改该值。

### 总结本文探讨了 Vue 子组件修改 Prop 的值的三种方法：使用 `$emit` 和 `$on`、使用 `sync` 修饰符和使用 `$set` 方法。每种方法都有其优缺点，选择哪种方法取决于具体的需求和场景。