在做乙個專案過程中，可能會出現多個重複動畫，這樣反覆的使用包裹 dom 元素實現動畫顯然是不合理的。為了解決這個問題，我們可以利用插槽傳遞dom元素的特點實現動畫的封裝，多處復用的效果！
1.動畫封裝模板
commonanimation.vue
注意：不要忘記使用props: ['show']接收傳值
>
@before-enter
="handlebeforeenter"
@enter
="handleenter"
@after-enter
="handleafterenter"
>
v-if
="show"
>
slot
>
transition
>
template
>
>
export
default
,handleenter
(el, done)
,2000);
settimeout((
)=>
,4000);
},handleafterenter
(el)}}
script
>
animate.vue
注意：傳值寫法:show="show"
>
"root"
>
:show
="show"
>
>
hello worlddiv
>
v-animation
>
:show
="show"
>
>
hello worldh1
>
v-animation
>
@click
="toggle"
>
切換button
>
div>
template
>
>
import commonanimation from
"./commonanimation.vue"
;export
default},
methods:},
components:
}script
>
在Vue中使用插槽
在vue中使用插槽 元件的template裡可以在任意位置新增,slot為標籤，稱為插槽，像是乙個藉口，接受html資料。具名插槽，slot標籤可以新增name屬性，用與區分元件中不同插槽 預設值這樣在呼叫元件時就可以在innerhtml裡寫入對應的html資料 這樣就會把這個標籤下的，包括這個標籤...
在Vue中使用插槽（slot）
什麼是插槽 顧名思義，乙個蘿蔔乙個坑。子元件建立的標籤插入的內容不會在瀏覽器顯示。這時需要用到vue新的語法slot。vue為什麼要用插槽 元件標籤是元件定義好的內容，當我們想在元件標籤內放一些東西的時候。是不具有作用的。他不會顯示。hello 瀏覽器中不會顯示hello。dom結構中也沒有div ...
Vue學習小札 2 7 在Vue中使用插槽
通過插槽可以更方便得向子元件新增dom元素 dell vue.component child 複製 顯示就是父元件向子元件新增得dell 也可以給定義預設值，當父元件沒有給子元件新增插槽時顯示。預設內容 複製 具名插槽 header slot header header footer slot fo...