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中物件和陣...