vue3一个子组件中的两个button分别放在两个父组件中展示
时间: 2023-11-09 14:04:38 浏览: 27
这种情况下,你需要使用 Vue.js 中的 `provide` 和 `inject` API 来实现跨组件通信。具体步骤如下:
1. 在父组件中使用 `provide` 将需要共享的数据或方法提供给子组件。例如:
```javascript
// 父组件 A
export default {
provide() {
return {
handleClick: this.handleClick // 将 handleClick 方法提供给子组件
}
},
methods: {
handleClick() {
console.log('button clicked')
}
}
}
```
2. 在子组件中使用 `inject` 获取父组件提供的数据或方法。例如:
```javascript
// 子组件 B
export default {
inject: ['handleClick'], // 注入父组件提供的 handleClick 方法
template: `
<div>
<button @click="handleClick">Button in Parent A</button>
</div>
`
}
```
3. 在另一个父组件中也使用 `provide` 将需要共享的数据或方法提供给子组件。例如:
```javascript
// 父组件 C
export default {
provide() {
return {
handleClick: this.handleClick // 将 handleClick 方法提供给子组件
}
},
methods: {
handleClick() {
console.log('button clicked')
}
}
}
```
4. 在子组件中再次使用 `inject` 获取另一个父组件提供的数据或方法。例如:
```javascript
// 子组件 D
export default {
inject: ['handleClick'], // 注入父组件提供的 handleClick 方法
template: `
<div>
<button @click="handleClick">Button in Parent C</button>
</div>
`
}
```
这样,你就可以在不同的父组件中展示子组件 B 和 D,并且它们都可以使用父组件提供的 handleClick 方法了。