Vue元件傳參

2022-07-19 14:42:32 字數 1111 閱讀 2395

通常,父元件的模板中包含子元件,父元件要正向地向子元件傳遞資料或引數,子元件收到後根據引數的不同來渲染不同的內容,或者執行操作。 這個正向傳遞資料的過程是通過props來實現的。

在元件中,子元件使用props來宣告需要從父元件接受的資料。

但是父元件不能向子元件傳遞資料。

⚠️ 需要注意的是:

在 js中物件和陣列是引用型別,指向同乙個記憶體空間,所以 props 是物件和陣列時,在子元件內改變是會影響父紐件的。

然後寫了乙個傳遞的demo

父元件中

子元件中

業務中,還比較常用元件驗證:

在vue中一般很少會用到直接操作dom,但不可避免有時候需要用到,這時我們可以通過ref和$refs這兩個來實現

refref 被用來給元素或子元件註冊引用資訊, 引用資訊將會註冊在父元件的 $refs 物件上,如果是在普通的dom元素上使用,引用指向的就是 dom 元素,如果是在子元件上,引用就指向元件的例項。

$refs

$refs 是乙個物件,持有已註冊過 ref 的所有的子元件。

具體演示

1.基礎**

先來準備案例基礎**,如下

我們先通過 getelementbyid 方法來獲取

通過上面的演示我們發現 在vm例項上有乙個 $refs屬性,而且該屬性就有我們通過ref註冊的dom物件,於是我們可以這樣獲取dom物件

父元件

父元件

子元件

vue 元件傳參

我們通常把路由直接對映 繫結 的元件稱為 路由元件,也只有路由元件才能直接呼叫路由有關物件 router route 當我們乙個元件即希望作為路由元件使用,又可能作為功能元件 某個頁面中的一部分 去使用,這個時候路由元件傳參的方式來做到這點 1.父元件向子元件傳遞引數 還可以傳遞函式 props 父...

vue元件傳參

負值元件的定義有兩種,我稱為常規父子元件和特殊父子元件。1.1 常規父子元件 將其他元件以import引入用自定義標籤接收,在當前元件中component裡註冊該標籤,頁面上可以直接用 自定義標籤 引入子元件 註冊子元件 使用子元件 1.2 特殊父子元件 在路由中定義好元件,元件中含有childre...

vue傳參,元件之間傳參 路由傳參 vuex

詳見 兩種情況 params 和 query 都可以在目標元件的生命週期裡,通過 this.route 進行獲取 例 首頁中精選主題的路由傳參 精選主題 1 簡單舉例 a 一般會新建 store 資料夾,在 index.js 初始化 vuex b 在 main.js 中,引入 c 例如,在我的頁面修...