用 Vue Component Slot 實現自定義 HTML
用 Vue Component Slot 實現自定義 HTML
之前有Post not found: vue-component-fast-review 快速講一下 component 的各個功能
其中有說到 component 傳值到 content 要靠 slot，是什麼意思呢？在此特別介紹一下。
parent
外層 template 這樣使用
在放在 component 的 content, 是用來取代 slot
多個 slot 時，要指定 slot
<template>
<div>
<component>
<p slot="slotName">指定 slot, 要插入 component 的 html</p>
<p>不指定 slot, 要插入 component 的 html</p>
</component>
</div>
</template>
|
child
在 component 內，定義 slot : 提供外部 html 插入 template 的位置
<template>
<div>
<slot name="slotName"></slot>
<slot></slot>
</div>
</template>
|
dynamic component
觸發 created, destroyed 的 component，只要 component 不出現在畫面上，就會把 component 消滅掉，並且下次出現時所有的數值歸 0
hook
parents
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <template>
<component :is="targetComponent"></component>
</template>
<script>
export default {
name: 'App',
data () {
return {
targetComponent: 'componentName'
}
},
created () {
console.log('created')
},
destroyed () {
console.log('destoryed')
},
}
</script>
|
不滅的 dynamic component
component 要永生就加 <keep-alive>
1
2
3
4
5
| <template>
<keep-alive>
<component :is="targetComponent"></component>
</keep-alive>
</template>
|
永生不死，終究有遺憾，不知死為何物。
無法觸發 destory 的 hook
可觸發 hook 又永生的 component
hook
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <template>
<keep-alive>
<component :is="targetComponent"></component>
</keep-alive>
</template>
<script>
export default {
name: 'App',
data () {
return {
targetComponent: 'componentName'
}
},
deactivated () {
console.log('deactivated')
},
activated () {
console.log('activated')
}
}
</script>
|