Mysql學習隨筆--6
阿新 • • 發佈:2020-12-10
技術標籤:VUE頁面開發
一、介紹:slot可以理解為佔位符,在子元件中給父元件站位。
二、舉例說明:
1、沒有插槽:
(1)父元件:
<template> <div> 我是父元件 <childOne> <p style="color:red">我是父元件插槽內容</p> </childOne> </div> </template> <script> import childOne from './children/child-one' export default { components: {childOne }, } </script>
(2)子元件:
<template>
<div class="childOne">
<div>我是childOne元件</div>
</div>
</template>
(3)效果:父元件插入的內容並沒有起作用
2、加上slot:
(1)子元件加上插槽:
<template> <div class="childOne"> <div>我是childOne元件</div> <slot></slot> </div> </template>
(2)效果:父元件的插入內容可以顯示
比如改變slot的位置:
<template>
<div class="childOne">
<slot></slot>
<div>我是childOne元件</div>
</div>
</template>
3、具名插槽:
(2)子元件:在子元件中定義了三個slot標籤,其中有兩個分別添加了name屬性header和footer
<template> <div> <div>我是childOne元件</div> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> </template>
(2)父元件:在父元件中使用template並寫入對應的slot值來指定該內容在子元件中現實的位置(當然也不用必須寫到template),沒有對應值的其他內容會被放到子元件中沒有新增name屬性的slot中
<template>
<div>
我是父元件
<childOne>
<p>啦啦啦,啦啦啦,我是賣報的小行家</p>
<template slot="header">
<p>我是name為header的slot</p>
</template>
<p slot="footer">我是name為footer的slot</p>
</childOne>
</div>
</template>
(3)效果:
4、插槽的預設內容:可以在子元件的slot標籤中寫入內容,當父元件沒有寫入內容時會顯示子元件的預設內容,當父元件寫入內容時,會替換子元件的預設內容。
(1)子元件slot中寫內容,父元件不寫:
<template>
<div>
我是父元件
<childOne>
</childOne>
</div>
</template>
<template>
<div >
<slot>我是子元件的插槽</slot>
</div>
</template>
(2)子元件slot中寫內容,父元件也寫:
<template>
<div>
我是父元件
<childOne>
我是父元件插槽內容
</childOne>
</div>
</template>
<script>
import childOne from './children/child-one'
export default {
components: {childOne },
}
</script>
<template>
<div >
<slot>我是子元件的插槽</slot>
</div>
</template>
5、slot父元件傳參給子元件:直接繫結
(1)父元件:
<template>
<div>
我是父元件
<childOne>
<p>{{name}}</p>
</childOne>
</div>
</template>
<script>
import childOne from './children/child-one'
export default {
data(){return {name:'張三'}},
components: {childOne }
}
</script>
(2)子元件:
<template>
<div >
<slot></slot>
</div>
</template>
(3)效果:
6、slot子元件傳參給父元件:
(1)父元件:在父元件上使用slot-scope屬性
<template>
<div>
我是父元件
<childOne>
<template slot-scope="user">
<div v-for="item in user" :key="item">
{{item}}
</div>
</template>
</childOne>
</div>
</template>
<script>
import childOne from './children/child-one'
export default {
data(){return {name:'張三'}},
components: {childOne }
}
</script>
(2)子元件:在子元件的slot標籤上繫結需要的值:
<template>
<div>
我是子元件
<slot :data="user"></slot>
</div>
</template>
<script>
export default {
name: 'slotthree',
data () {
return {
user: [
{name: '張三', sex: '女'},
{name: '李四', sex: '男'},
{name: '王五', sex: '男'}
]
}
}
}
</script>
(3)效果:
三、Element中帶插槽的常用元件:元件帶插槽,則在引用的時候可以自定義內容
1、el-table:el-table-column帶插槽:
<el-table-column label="使用者名稱" min-width="22" align="center" show-overflow-tooltip>
<template slot-scope="scope">
{{scope.row.userName}}
</template>
</el-table-column>
2、el-calendar:日曆單元格帶插槽:
<el-calendar>
<!-- 這裡使用的是 2.5 slot 語法,對於新專案請使用 2.6 slot 語法-->
<template
slot="dateCell"
slot-scope="{date, data}">
<p :class="data.isSelected ? 'is-selected' : ''">
{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
</p>
</template>
</el-calendar>
3、el-tab:tab標籤插槽,可以自定義tab