Vue學習小札 2 7 在Vue中使用插槽

2021-09-12 01:27:28 字數 773 閱讀 1247

通過插槽可以更方便得向子元件新增dom元素

dell

vue.component('child',);

複製**

顯示就是父元件向子元件新增得dell

也可以給定義預設值,當父元件沒有給子元件新增插槽時顯示。

預設內容

複製**

具名插槽

"header" slot="header">header

"footer" slot="footer">footer

vue.component('body-content',);

複製**

通過具名插槽這種寫法,可以一次性傳遞多個區域的dom結構(給每一插槽傳遞的內容區域傳遞乙個 slot=」「),在子元件裡通過具名插槽分別使用幾個部分的dom結構。

作用域插槽:當子元件做迴圈或者某一部分應該由外部傳遞進來的時候

首先父元件呼叫子元件的時候,給子元件傳遞乙個插槽,這個插槽叫做作用域插槽,作用域插槽必須是乙個開頭和結尾的內容,        同時這個插槽要宣告乙個slot-scope 來接受子元件傳遞過來的資料,然後提供乙個模板資訊顯示資料如何展示。

"props">

}--------hello

vue.component('child',

},template: `

` });

複製**

Vue學習小札 2 4 父子元件間的資料傳遞

父元件向子元件傳遞資料 父元件通過屬性的形式向子元件傳遞資料 子元件通過props形式接受父元件傳來的資料。0 1 複製 父元件通過屬性的形式向counter子元件傳遞了乙個叫count的資料,子元件通過props接受count這個屬性的內容。這樣在子元件的模板裡面就可以直接來使用count。單向資...

在Vue中使用Sass

sass 是什麼?sass又稱scss,它是css預處理之一。它在css語法的基礎上增加了變數 巢狀 混合巨集 繼承 佔位符等等高階功能。那什麼是css預處理器呢?簡單理解就是,css預處理是一種專門的程式語言,通過該語言進行web頁面設計,然後再編譯成正常的css檔案,以供專案使用。css預處理器...

在vue中使用wowjs

1 安裝依賴 npm install wowjs s 2 main.js中引入 引入animate.css,安裝wowjs之後,直接引入 import animate.css 3 在需要使用wowjs的元件中使用 在標籤上新增動畫的類名 data wow duration 動畫持續時間 data w...