父子组件通信方式:
#### 1. **Props 传递数据**:
- 父组件通过属性绑定将数据传递给子组件。
- 子组件通过在 `props` 对象中声明来接收父组件传递的数据。
**示例**:
```vue
// ParentComponent.vue
<template>
<ChildComponent :message="messageFromParent" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
data() {
return {
messageFromParent: 'Hello from parent!',
};
},
components: {
ChildComponent,
},
};
</script>
// ChildComponent.vue
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
props: {
message: String,
},
};
</script>
```
#### 2. **子向父传递数据**:
- 使用 `emit` 在子组件中触发自定义事件,传递数据给父组件。
- 父组件监听子组件的自定义事件,并在对应的方法中处理数据。
**示例**:
```vue
// ChildComponent.vue
<template>
<button @click="sendDataToParent">Send Data</button>
</template>
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
setup(props, { emit }) {
const dataToSend = ref('Data from child');
const sendDataToParent = () => {
emit('child-event', dataToSend.value);
};
return {
sendDataToParent,
};
},
});
</script>
// ParentComponent.vue
<template>
<ChildComponent @child-event="handleChildData" />
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
methods: {
handleChildData(dataFromChild) {
console.log('Received data from child:', dataFromChild);
// Handle the received data from the child component
},
},
components: {
ChildComponent,
},
};
</script>
```
#### 3. **Provide / Inject**:
- 使用 `provide` 在祖先组件中提供数据,然后使用 `inject` 在子孙组件中接收这些数据。
**示例**:
```vue
// AncestorComponent.vue
<script>
import { provide } from 'vue';
export default {
setup() {
const sharedData = 'Shared data from ancestor';
provide('shared', sharedData);
},
};
</script>
// DescendantComponent.vue
<template>
<div>{{ sharedData }}</div>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
const sharedData = inject('shared');
return {
sharedData,
};
},
};
</script>