學習Vue(9) 元件

2021-10-02 07:39:01 字數 1556 閱讀 1069

元件(component)是 vue.js 最強大的功能之一。

元件可以擴充套件 html 元素,封裝可重用的**。

要使用元件,就需要先註冊乙個元件,下面是註冊乙個全域性元件的語法:

vue.component(tagname,options)
解釋說明:

所有例項都能夠使用的元件就是全域性元件,註冊在例項之外的。

瀏覽器效果如下:

在某個例項中註冊的元件,並且只允許在該例項使用的元件就是區域性元件。

prop 是子元件用來接受父元件傳遞過來的資料的乙個自定義屬性。

父元件的資料需要通過 props 把資料傳給子元件,子元件需要顯式地用 props 選項宣告 "prop".

動態繫結prop,繫結的vue例項中data的屬性值,即當父元件的資料變化時,也會傳遞給子元件,導致子元件的值也發生變化。

prop 是單向繫結的:當父元件的屬性變化時,將傳導給子元件,但是子元件屬性變化,父元件的屬性不會跟著變化。

prop可以通過v-bind動態賦值:可以傳入乙個字串;乙個數字;乙個布林值;乙個陣列;乙個物件;乙個物件的所有屬性。

瀏覽器效果:

可以為元件的 prop 指定驗證要求,例如你知道的這些型別。如果有乙個需求沒有被滿足,則 vue 會在瀏覽器控制台中警告你。

為了定製 prop 的驗證方式,你可以為props中的值提供乙個帶有驗證需求的物件,而不是乙個字串陣列。例如:

vue.component('my-component', ,

// 帶有預設值的數字

propd: ,

// 帶有預設值的物件

prope: }},

// 自定義驗證函式

propf:

}}})

當 prop 驗證失敗的時候,(開發環境構建版本的) vue 將會產生乙個控制台的警告。

type可以是下列原生建構函式中的乙個:

type還可以是乙個自定義的建構函式,並且通過instanceof來進行檢查確認。

自定義事件是為了解決子元件將資料傳回到父元件。

使用 v-on 繫結自定義事件, 每個 vue 例項都實現了事件介面(events inte***ce),即:

另外,父元件可以在使用子元件的地方直接用 v-on 來監聽子元件觸發的事件。

VUE (9)元件 props資料傳遞

本篇資料來於官方文件 簡單來說,更適合新手閱讀 二十六 props資料傳遞 是孤立的,簡單的來說,元件和元件之間,即使有同名屬性,值也不共享。add del div var vm new vue button data function del button data function script...

VUE (9)元件 props資料傳遞

本篇資料來於官方文件 簡單來說,更適合新手閱讀 二十六 props資料傳遞 是孤立的,簡單的來說,元件和元件之間,即使有同名屬性,值也不共享。add del div var vm new vue button data function del button data function script...

初識vue 9 元件父子直接訪問

主要使用2個方法 children refs。doctype html en utf 8 title title vue.js script head cpn cpn cpn cpn shu cpn cpn getchild 檢視子元件 button div body cpn h1 div temp...