vue3 setup语法糖孙组件向爷爷组件传值
时间: 2023-12-29 09:06:30 浏览: 111
Vue 之孙组件向爷组件通信的实现
在Vue3中,可以使用`provide`和`inject`来实现祖孙组件之间的传值。具体步骤如下:
1. 在祖组件中使用`provide`方法将要传递的数据传递给孙组件,例如:
```javascript
// 祖组件
import { provide } from 'vue';
export default {
setup() {
const grandValue = '我是牛爷爷想大头了';
provide('grandValue', grandValue);
}
}
```
2. 在孙组件中使用`inject`方法接收祖组件传递的数据,例如:
```javascript
// 孙组件
import { inject } from 'vue';
export default {
setup() {
const grandValue = inject('grandValue');
console.log(grandValue); // 输出:我是牛爷爷想大头了
}
}
```
注意:`provide`和`inject`方法需要在`setup`函数中使用。
阅读全文