父组件修改子组件数据有三种方法：1. 传递 props，将数据通过 props 绑定到子组件并修改父组件中数据；2. 事件监听，子组件监听父组件事件并修改内部状态；3. provider/inject，父组件提供数据状态，子组件通过注入更新内部状态。
Vue 父组件如何修改子组件数据
在 Vue.js 开发中，父组件可以通过以下方法修改子组件的数据：
1. 传递 Props
- 在父组件中使用
v-bind绑定数据到子组件的 props，然后再修改父组件中的数据。 - 子组件接收到 props 后，可以修改其内部状态，从而反映父组件数据的变化。
示例：
立即学习“前端免费学习笔记（深入）”；
<code class="vue">// 父组件
<template>
<child-component :data="myData" />
</template>
<script>
export default {
data() {
return {
myData: 10
}
}
}
</script>
// 子组件
<template>
<div>{{ data }}</div>
</template>
<script>
export default {
props: ['data'],
data() {
return {
// 也可以使用 props 的默认值
data: this.data || 0
}
}
}
</script></code>2. 事件监听
- 子组件可以使用
v-on监听父组件发出的事件。 - 当父组件的数据发生变化时，父组件可以触发一个事件，子组件监听该事件并修改其内部状态。
示例：
立即学习“前端免费学习笔记（深入）”；
<code class="vue">// 父组件
<template>
<button @click="incrementData">+</button>
<child-component :data="myData" />
</template>
<script>
export default {
data() {
return {
myData: 10
}
},
methods: {
incrementData() {
this.myData++;
this.$emit('dataUpdated'); // 触发事件
}
}
}
</script>
// 子组件
<template>
<div>{{ data }}</div>
</template>
<script>
export default {
props: ['data'],
data() {
return {
data: this.data || 0
}
},
mounted() {
// 监听父组件的事件
this.$on('dataUpdated', () => {
this.data++;
})
}
}
</script></code>3. Provider/Inject
- 父组件可以使用
provide提供一个数据状态，子组件可以使用inject注入该状态。 - 当父组件的数据发生变化时，父组件可以更新
provide后的数据，子组件会自动更新其内部状态。
示例：
立即学习“前端免费学习笔记（深入）”；
<code class="vue">// 父组件
<template>
<provider-component>
<child-component />
</provider-component>
</template>
<script>
export default {
provide() {
return {
myData: 10
}
}
}
</script>
// 提供者组件
<template>
<slot />
</template>
<script>
export default {
provide() {
return this.$parent.provide();
}
}
</script>
// 子组件
<template>
<div>{{ myData }}</div>
</template>
<script>
export default {
inject: ['myData'],
data() {
return {
myData: this.myData || 0
}
}
}
</script></code> 
