vue.js插槽Slot的用法與具名插槽、作用域插槽的使用
阿新 • • 發佈:2019-02-20
1、基本用法
插槽指允許將自定義的元件像普通標籤一樣插入內容
import Vue from 'vue'
// 定義元件componentOne
const compoentOne = {
template: `
<div :style="style1">
<slot></slot> // 定義插槽
</div>
`,
data () {
return {
style1: {
width: '200px' ,
height: '200px'
border: '1px solid #ccc'
}
}
}
}
// 呼叫元件
new Vue({
components: {
ComOne: componentOne
},
el: '#id',
data () {
return {
val1: '123'
}
},
template: `
<div>
<com-one >
<span>{{val1}}</span> // 使用插槽
</com-one>
</div>
`
})
2、具名插槽
給具體的插槽命名,並在使用的時候傳入插槽的名稱
import Vue from 'vue'
// 定義元件componentOne
const compoentOne = {
template: `
<div :style="style1">
<div>
<slot name="header" ></slot> // 定義一個名稱為header的插槽
</div>
<div>
<slot name="body"></slot> // 定義一個名稱為body的插槽
</div>
</div>
`,
data () {
return {
style1: {
width: '200px',
height: '200px'
border: '1px solid #ccc'
}
}
}
}
// 呼叫元件
new Vue({
components: {
ComOne: componentOne
},
el: '#id',
data () {
return {
val1: '123',
val2: '456'
}
},
template: `
<div>
<com-one>
<span slot="header">{{val1}}</span> // 使用插槽'header**重點內容**'
<span slot="body">{{val2}}</span> // 使用插槽'body'
</com-one>
</div>
`
})
3、作用域插槽
將定義插槽的變數作用域到使用插槽中
import Vue from 'vue'
// 定義元件componentOne
const compoentOne = {
template: `
<div :style="style1">
<slot :aa="val1" :bb="val2"></slot> // 給插槽傳入變數
</div>
`,
data () {
return {
style1: {
width: '200px',
height: '200px'
border: '1px solid #ccc'
},
val1: 'slot1',
val2: 'slot2'
}
}
}
// 呼叫元件
new Vue({
components: {
ComOne: componentOne
},
el: '#id',
data () {
return {
val1: '123'
}
},
template: `
<div>
<com-one>
<span slot-scope="props">{{props.aa}}{{props.bb}}{{val1}}</span> // 定義插槽傳入的物件props,並使用
</com-one>
</div>
`
})