Vue 2 0 入門系列(5)元件例項之任務列表

2021-09-16 21:45:58 字數 1008 閱讀 5968

元件,其實很好理解,就是造輪子。比如,這裡是乙個任務列表:

我們完全可以將其封裝成元件,然後寫成以下這種形式:

打掃房間

做作業寫報告

讀書

這樣做,可讀性是不是提高了很多?而且也更利於復用。接下來我們來一步步實現任務列表元件

vue 註冊元件,採用的是vue.component()的方法,傳入標籤名與可選項。我們先來定義task

做作業

寫報告讀書

打掃

template用於定義元件的 html 檢視。其中,作為原始元素的插槽,自定義的內容將會取代。如果沒有自定義內容,就會顯示預設的內容。

瀏覽器顯示:

做作業

寫報告讀書

打掃預設內容

現在,我們來定義task-list元件:

首先,建立了乙個task-list元件,並且在元件中呼叫了task元件。元件模板必須包括乙個共同的根元素,因此定義了乙個根元素div

這樣做不過是做了最簡單的封裝,我們希望任務列表以變數的方式傳遞進去,完全沒問題。元件其實跟 vue 例項類似,也可以使用methodscomputed等。

特別要注意的是,元件中的data需要使用函式形式。這是因為,假如使用data屬性並且在檢視中如果定義多個,那麼它們之間就會共享該屬性,造成相互影響。

本節只是初步了解元件,接下來會建立更為實用的元件。

vue 2 0 元件 父子元件通訊

示例 輸入框 通過this.emit input value 將將使用者的之輸出到v model繫結的值 randomid v bind value value v on input oninput 複製 export default data function methods 複製 msg 複製 ...

vue2 0元件傳值

props down emit up 嘿嘿 如果是第一次接觸vue2.0元件傳值的肯定很疑惑,這是什麼意思 大神總結的,我也就是拿來用用 down 指的是下的意思,即父元件向子元件傳值,用props up 指的是上的意思,即子元件想父元件傳值,用emit。1.子元件向父元件的傳值 child.vue...

vue2 0元件之間的傳值

1.父子元件 props props 需要注意的是,雖然的是單向的資料流,但是如果傳遞的是陣列或是物件這樣的引用型別,子元件資料變化,父元件的資料通也會變化 子元件 click export default props msgfromfather1 methods 父元件 動態繫結的資料 固定內容 ...