slot 作用域插槽
- 旧: slot-scope
- 使用流程
- 在组件的模板中书写slot插槽,并将当前组件的数据通过 v-bind 绑定在 slot标签上
- 在组件使用时,通过slot-scope = “slotProp” 来接收slot标签身上绑定的数据
- 通过 slotProp.xxx 就可以进行使用了
<div id="app"> <Hello> <template slot = "default" slot-scope = "slotProp"> <p> {{ slotProp.msg }} </p> </template> </Hello> </div> <template id="hello"> <div> <slot name = "default" :msg = "msg"></slot> </div> </template>
- 使用流程
Vue.component('Hello',{
template: '#hello',
data () {
return {
msg: 'hello'
}
}
})
new Vue({
el: '#app'
})
- 新: v-slot
<div id="app">
<Hello>
<template v-slot:default = "slotProp">
{{ slotProp.msg }}
</template>
</Hello>
</div>
<template id="hello">
<div>
<slot name = "default" :msg = "msg"></slot>
</div>
</template>
new Vue({
components: {
'Hello': {
template: '#hello',
data () {
return {
msg: 'hello'
}
}
}
}
}).$mount('#app')