Vue3新特性的學習(八)——provide和inject元件通訊

語言: CN / TW / HK

theme: healer-readable

持續創作,加速成長!這是我參與「掘金日新計劃 · 6 月更文挑戰」的第18天,點選檢視活動詳情

今天主要學的是provide和inject元件的通訊,以及響應式資料的判斷。

provide和inject元件通訊

provideinject可以輕鬆實現跨層級元件通訊,provide在父元件中返回要傳給下級的資料,inject在需要使用這個資料的子輩元件或者孫輩等下級元件中注入資料。

示例: 新建一個子元件inject.vue

```js

``` 在父元件中引入inject:

```js

``` 這時候在子元件那裡就接收到父元件傳過來的值。

同樣,孫輩元件也是可以接受到父元件穿過來的值的,定義一個孫輩元件,在子元件中引入即可:

```js // grannson.vue

``` 在子元件中引入:

```js import grandsonComponent from "@/components/grandson.vue";

`` 在專案頁面中就能看到,message`都被傳進來了。 image.png

響應式資料的判斷

如果要檢查一個數據是否為響應式資料可以通過isRef、isReactive、 isReadonly、isProxy方法來實現,先看一下這些方法的文字說明: 1. isRef——檢查一個值是否為一個ref物件 2. isReactive——檢查一個物件是否是由reactive建立的響應式代理 1. isReadonly——檢查一個物件是否有readonly建立的只讀代理 1. isProcy——檢查一個物件是否由reactive或者readonly方法建立的代理 使用方法

```js

```

接下來繼續學習Vue3的知識點~