深刻理解Vue中的元件

2021-09-20 08:08:59 字數 4815 閱讀 8787

今天看了下vue官網上關於元件的教程,感覺內容還挺多,現在把元件中基本的知識梳理一下。

註冊元件就是利用vue.component()方法,先傳入乙個自定義元件的名字,然後傳入這個元件的配置。

vue.component('mycomponent',

} })

如上方式,就已經建立了乙個自定義元件,然後就可以在vue例項掛在的dom元素中使用它。

data: ,

components:

} })

直接使用vue.component()建立的元件,所有的vue例項都可以使用。還可以在某個vue例項中註冊只有自己能使用的元件。

data: ,

components:

} })

注意:元件的模板只能有乙個根元素。下面的情況是不允許的。

template: `這是乙個區域性的自定義元件,只能在當前vue例項中使用

hello`,

可以看出,註冊元件時傳入的配置和建立vue例項差不多,但也有不同,其中乙個就是data屬性必須是乙個函式。

這是因為如果像vue例項那樣,傳入乙個物件,由於js中物件型別的變數實際上儲存的是物件的引用,所以當存在多個這樣的元件時,會共享資料,導致乙個元件中資料的改變會引起其他元件資料的改變。

而使用乙個返回物件的函式,每次使用元件都會建立乙個新的物件,這樣就不會出現共享資料的問題來了。

當使用 dom 作為模版時 (例如,將 el 選項掛載到乙個已存在的元素上), 你會受到 html 的一些限制,因為 vue 只有在瀏覽器解析和標準化 html 後才能獲取模板內容。尤其像這些元素在html中使用元素,會有一些屬性,如class,id,還可以繫結事件,自定義元件也是可以的。當在乙個元件中,使用了其他自定義元件時,就會利用子元件的屬性和事件來和父元件進行資料交流。

如上如所示,父子元件之間的通訊就是props

down,events

up,父元件通過 屬性props向下傳遞資料給子元件,子元件通過 事件events 給父元件傳送訊息。

比如,子元件需要某個資料,就在內部定義乙個prop屬性,然後父元件就像給html元素指定特性值一樣,把自己的data屬性傳遞給子元件的這個屬性。

而當子元件內部發生了什麼事情的時候,就通過自定義事件來把這個事情涉及到的資料暴露出來,供父元件處理。

"baz" v-on:event-a="dothis(arg1,...arg2)">
如上**,

event-a是子元件定義的乙個事件,dothis是父元件的乙個方法

過程就是這樣:

父元件把baz資料通過prop傳遞給子元件的foo

子元件內部得到foo的值,就可以進行相應的操作;

當子元件內部發生了一些變化,希望父元件能知道時,就利用**觸發event-a事件,把一些資料傳送出去

父元件把這個事件處理器繫結為dothis方法,子元件傳送的資料,就作為dothis方法的引數被傳進來

然後父元件就可以根據這些資料,進行相應的操作

vue元件通過props屬性來宣告乙個自己的屬性,然後父元件就可以往裡面傳遞資料。

vue.component('mycomponent',}

', props: ['mymessage'],

data ()

} })

然後呼叫該元件

my-message="hello">

注意,由於html特性是不區分大小寫的,所以傳遞屬性值時,mymessage應該轉換成 kebab-case (短橫線隔開式)my-message="hello"

這裡說一下v-bind繫結屬性值的乙個特性:一般情況下,使用v-bind給元素特性(attribute)傳遞值時,vue會將""中的內容當做乙個表示式。

比如:

attr="message">hello

上面這樣,div元素的attr特性值就是message

而這樣

"message">hello
這裡的message應該是vue例項的data的乙個屬性,這樣div元素的attr特性值就是message這個屬性的值。

之所以說是一般情況,是因為classstyle特性並不是這樣。用v-bind:classclass傳入正常的類名,效果是一樣的,因為對於這兩個特性,vue採用了合併而不是替換的原則。

根據上面,想要把父元件的屬性繫結到子元件,應該使用v-bind,這樣,父元件中資料改變時能反映到子元件。

注意,根據父元件傳遞給子元件的屬性型別的不同,當在子元件中更改這個屬性時,會有以下兩種情況:

這是父元件的parentarray:}

"parentarray">

也可以直接繫結到元件物件上:

var home = 

new vue(

})

如果把切換出去的元件保留在記憶體中,可以保留它的狀態或避免重新渲染。為此可以新增乙個keep-alive指令引數:

:is="currentcomponent">

終於到了基本知識的最後乙個了。官網寫的很詳細。

上面用到的很多元件的使用方式是這樣的:

也就是說元件中是空的,沒有放置任何文字或元素。但是原生的html元素都是可以進行巢狀的,div裡面放table什麼的。自定義元件開閉標籤之間也可以放置內容,不過需要在定義元件時使用slot

slot相當於子元件設定了乙個地方,如果在呼叫它的時候,往它的開閉標籤之間放了東西,那麼它就把這些東西放到slot中。

子元件的slot標籤內可以放置內容,當父元件沒有放置內容在子元件標籤內時,slot中的內容會渲染出來;

當父元件在子元件標籤內放置了內容時,slot中的內容被丟棄

子元件的模板:

只有在沒有要分發的內容時才會顯示。

div>

父元件模板:

這是一些初始內容

div>

渲染結果:

這是一些初始內容

div>

slot可以有很多個。那麼子元件對於父元件放置的多餘的內容如何放到各個slot中呢?方法就是子元件給每個slot起乙個名字name,父元件放置多餘的元素時,給每個元素的slot屬性分配乙個代表slot的名字。到時候,多餘的內容就會根據自己的slot屬性去找具有對應名字的slot元素。

注意:如果子元件沒有匿名的slot,當分發的多餘內容找不到對應的slot時,就會被丟棄

class="container">

name="header">

slot>

父元件模版:

主要內容的乙個段落。

另乙個主要段落。p>

slot="footer">這裡有一些聯絡資訊

渲染結果為:

class="container">  

主要內容的乙個段落。

另乙個主要段落。

ain>

這裡有一些聯絡資訊

作用域插槽也是乙個插槽slot,但是他可以把資料傳遞給到父元件的特定元素內,然後有父元件決定如何渲染這些資料。

vue.component('my-component4', 

} })

父元件在呼叫子元件時,需要在裡面新增乙個template元素,並且這個template元素具有scope特性

scope="props">

scope特性的值,就代表了所有子元件傳過來的資料組成的物件。相當於

props =
最後,父元件就可以在template中渲染子元件傳過來的資料了

scope="props">} }

作用域插槽也是插槽,只不過是多加了些特性,然後父元件多進行了些處理。

深刻理解IdentityHashMap

新建pojo package test public class cat public string getname public void setname string name public integer getage public void setage integer age public...

深刻理解IdentityHashMap

新建pojo package test public class cat public string getname public void setname string name public integer getage public void setage integer age public...

JS深刻理解補充

對於函式的理解,首先看乙個函式定義 function functiondefined 顯而易見,functiondefined 為函式名字,在js中為指向這個函式體的指標,代表這個函式的指標的變數,並且和原始資料型別一樣儲存在棧中。而functiondefined函式體則儲存在堆中。每當new出乙個...