vue元件穿方法 Vue 元件傳參的八種方式總結

2021-10-16 20:32:59 字數 1861 閱讀 4200

vue 元件的使用不管是在平常工作還是在面試面試中,都是頻繁出現的。因此系統的梳理一下元件之間的傳參還是非常有必要的

一、props 傳參

子元件定義 props 有三種方式:

// 第一種陣列方式

props: [***, ***, ***]

// 第二種物件方式

props:

// 第三種物件巢狀物件方式

props:

複製**

第三種物件預設支援 4 種屬性,並且都是非必填的。可以隨意使用

父元件傳參的倆種方式

第一種靜態屬性傳參

注意:在不定義 props 型別的情況下 props 接受到的均為 string。

當 props 屬性指定為 boolean 時,並且只有屬性 key 沒有值 value 時接受到的是 true

複製**

第二種動態屬性傳參

注意:需要區分非簡寫形式傳入的值是物件,則會對應 props 中多個值

會保留傳入值的型別

如果是表示式則獲取到的是表示式的計算結果

複製**

二、$attrs

$attrs 會獲取到 props 中未定義的屬性(class 和 style 屬性除外),支援響應式。常用的場景有倆種:

元件巢狀元件時可以使用 $attrs 來支援過多的屬性支援。比如 elementui 的 table 元件。支援的屬性十幾個,而平常封裝的時候用的最多的也就一倆個。

屬性預設是新增在父元件上的,有時候想把多餘的屬性新增在子元件上(可以結合 inheritattrs: false 屬性,讓父屬性不接受多餘的屬性)

$listeners

定義的事件都在子元件的根元素上,有時候想加到其他元素上。就可以使用 $listerners。它包含了父元件中的事件***(除了帶有 .native 修飾符的***)

三、$emit 通知

vue 預設有 $on $emit $once $off 幾種方法來實現發布訂閱模式,這也應用在了元件傳參上。在元件上新增的特殊方法 @abc=」methods」 就相當於使用了 $on 來監聽這個方法。因此元件內可以使用 $emit 來進行通知。

這裡有一道考題: for 迴圈的時候如何拿到子元件的傳值和 for 中迴圈的值

答案有倆種,一是 $event, 二是 閉包。只是需要注意 $event 只能獲取到第乙個值

getvalue(val, item))">

複製**

四、v-model

這個其實是一種通過

// 寫法 1

model:

// 寫法 2

props: ['a']

methods:

// 寫法 3

// 1. 事件名必須是 update: + 屬性名

// 2. 引數不能是表示式,最好是 data 裡面的屬性

props: ['a']

methods:

複製**

五、插槽

123 }}

複製**

六、$refs, $root, $parent, $children

$root 獲取根元件

$parent 獲取父元件

$children 獲取子元件(所有的子元件,不保證順序)

$refs 元件獲取元件例項,元素獲取元素

七、project / inject

注意:注入的值是非響應的

project()

// 寫法三

inject: {

parent: {

from: 'parent',

default: 222

複製**

八、vuex

這個相當於單獨維護的一組資料,就不過多的說了。

vue 元件傳參

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

vue元件傳參

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

Vue元件傳參

通常,父元件的模板中包含子元件,父元件要正向地向子元件傳遞資料或引數,子元件收到後根據引數的不同來渲染不同的內容,或者執行操作。這個正向傳遞資料的過程是通過props來實現的。在元件中,子元件使用props來宣告需要從父元件接受的資料。但是父元件不能向子元件傳遞資料。需要注意的是 在 js中物件和陣...