譯 我最終是怎麼玩轉了 Vue 的作用域插槽

2022-01-14 07:52:59 字數 2802 閱讀 4271

譯文出自:掘金翻譯計畫

譯者:shixi-li

校對者:brilliantguo, xionglong58

vue 是乙個用於構建 web 應用程式的前端框架,其設計方式使得開發人員可以非常快速地提高工作效率。該框架的各個方面都有很多資料,它的社群也每天都在不斷成長。如果你讀到了這篇文章,那麼這些事兒你很可能已經知道咯。

雖然我們可以快速直接地啟動並執行它,但是框架裡面那些更複雜和更強大的地方還是需要好好動動腦子才能理解(至少對我是這樣)。其中乙個是插槽,還有另乙個與之相關但功能上不太相同的就是作用域插槽。我學習的時候花了好一陣才理解插槽工作的機制,所以我覺得將我對插槽的理解分享出來是有價值的,因為這沒準會幫助到大家。

父元件以另外一種方式(不是通過常規的 props 屬性傳遞機制)向子元件傳遞資訊。我發現把這種方法同常規的 html 元素聯絡起來很有幫助。

比如說 html 標籤。

">this is a link

複製**

如果這是在 vue 環境中並且是你的元件,那麼你需要傳送「this is a link」資訊到『a』元件裡面,然後它將被渲染成為乙個超連結,而「this is a link」就是這個鏈結的文字。

讓我們定義乙個子元件來展示它的機制是怎樣的:

複製**

然後在父元件我們這麼做:

this is from outside  

複製**

這時候螢幕上呈現的就應該和你預期的一樣就是「this is from outside」,但這是由子元件所渲染出來的。

我們還可以給子元件新增預設的資訊,以免到時候這裡出現什麼都沒有傳入的情況,就像這樣子:

some default message

複製**

然後如果我們像這樣子建立我們的子元件:

複製**

我們可以看到螢幕上會呈現「some default message」。

具名插槽和常規插槽非常類似,唯一的差別就是你可以在你的目標元件多個位置傳入你的文字。

我們把子元件公升級一下,讓它有多個具名插槽

some default message

"top">

"bottom">

複製**

這樣,在我們的子元件中就有了三個插槽。其中 top 和 bottom 插槽是具名插槽。

讓我們更新父元件以使用它。

hello there!  

複製**

注意 —— 我們在這裡使用新的 vue 2.6 語法來指定我們想要定位的插槽:`v-slot:thename`。

你現在認為會在螢幕上看到什麼呢?如果你說是「hello top!」,那麼你就只說對了一部分。

因為我沒有為沒有具名的插槽賦予任何值,我們因此也還會得到預設值。所以我們真正會看到的是:

some default message

hello there!

其實真正意義上沒有具名的插槽是被當作『default』,所以你還可以這麼做:

hello there!  

複製**

現在我們就只會看到:

hello there!

因為我們已經提供了值給預設(也就是未具名)插槽,因此具名插槽『top』和『bottom』也都沒有預設值。

你傳送的並不一定只是文字,還可以是其他元件或者 html。你可以傳送任意你想展示的內容。

我認為插槽和具名插槽相對簡單,一旦你稍微玩玩就可以掌握。可另一方面,作用域插槽雖然名字相似但又有些不同之處。

我傾向於認為作用域插槽有點像乙個放映機(或者是乙個我歐洲朋友的投影儀)。以下是原因。

子元件中的作用域插槽可以為父元件中的插槽的顯示提供資料。這就像乙個人帶著放映機站在你的子元件裡面,然後在父元件的牆上讓一些影象發光。

這有乙個例子。在子元件中我們像這樣設定了乙個插槽:

"top" :myuser="user">

"bottom">

複製**

注意到我們的具名插槽『top』現在有了乙個名為『myuser』的屬性,然後我們繫結了乙個動態的值在『user』中。

在我們的父元件中就像這樣子設定子元件:

"slotprops">}  

複製**

我們在螢幕上看到的就是這樣子:

還是使用放映機的模擬,我們的子元件通過 myuser 物件將其使用者字串的值傳遞給父元件。它在父元件上投射到的牆就被稱為『slotprops』。

我知道這不是乙個完美的模擬,但當我第一次嘗試理解這個機制的時候,它幫助我以這種方式思考。

vue 的文件非常好,而且我也已經看到了一些其他關於作用域插槽工作機制的說明。但很多人採取的方法似乎是將父元件中的所有或部分屬性命名為與子元件相同,我認為這會使得資料很難被追蹤。

在父元件中使用 es6 解構,我們這樣子寫還可以將特定 user 物件從插槽屬性(你可以隨便怎麼稱呼它)解脫出來:

"">}

複製**

或者甚至就只是在父元件中給它乙個新的名字:

"">}

複製**

所有都是通過 es6 解構,與 vue 本身並沒有什麼關係。

如果你正開始使用 vue 和插槽,希望這可以讓你起步並解決一些棘手的問題。

Vectors For All 最終篇 譯

本文講的是vectors for all 最終篇 譯 這是關注 android 的vectordrawable系列博文中的第三篇,之前的文章是vectors for all almost 在此之前的另外一篇是vectors for all slight return 這兩篇文章向我們展示了 vect...

軟體最終是要換成錢的啊!

正在看林銳博士的 軟體工程思想 看到需求分析,很是感慨。需求分析要問的三個問題 這3個問題,最終關係到乙個核心的問題,軟體能不能換成錢!這讓我想起來,我剛工作時,老闆找談話,我稀里嘩啦地說了一堆,比如系統架構太差,質量太低,應該立即 馬上換個架構,云云。老闆完全沒有動容,我一度覺得自己很正確,不理解...

換鏈結最終是為了PR還是權重?

這其中要包括幾個方面,其中之一,就是看這個 的權重,從一些外鏈查詢 他會從側面體現你這個 的權重,比如yahoo外鏈查詢,http sitemap程式設計客棧.cn.yahoo.com search?bwm i p http 3a 2f 2fwww.bitauto.com 2f,程式設計客棧2f 2...