Vue 2.5 -插槽/槽作用域-将库组件封装到自定义组件中
Vue 2.5 -插槽/槽作用域-将库组件封装到自定义组件中
提问于 2018-08-15 19:26:57
我用的是vue 2.5和库Bootstrap。我对这个库的表组件感兴趣：https://bootstrap-vue.js.org/docs/components/table
但是我想封装这个组件，使我自己的组件具有自定义的配置，我不想重复这个配置。这样，我不必每次都要管理分页和过滤，并且可以添加其他特性，如数据导出。
因此，我创建了一个表-助手组件(目前只处理分页)
<template>
<div>
<b-table striped hover responsive
:items="items" :fields="fields"
:current-page="currentPage" per-page="10">
<slot></slot>
</b-table>
<b-pagination :total-rows="items.length" per-page="10" v-model="currentPage"></b-pagination>
</div>
</template>
<script>
import bTable from 'bootstrap-vue/es/components/table/table'
import bPagination from 'bootstrap-vue/es/components/pagination/pagination'
export default {
name: "table-helper",
props: ['items', 'fields'],
data() {
return {
currentPage: 1,
}
},
components: {
'b-table': bTable,
'b-pagination': bPagination
}
}
</script>我希望像这样使用我的组件(使用引导-vue插槽的可能性来重新格式化列)：
<table-helper :items="users" :fields="fields">
<template slot="fullName" slot-scope="data">
{{data.item.first_name}} {{data.item.last_name}}
</template>
</table-helper>显然，它不起作用(我得到的是表，而不是格式化的列)，因为<template slot="fullName" slot-scope="data">引用的是我的自定义组件，而不是b表组件。
因此，我想知道一种封装库组件的方法，它使用像这样的槽和槽作用域。
谢谢你的帮助。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-08-15 23:32:19
的关键点：
- 模板与JSX：您可能必须使用JSX来实现它，特别是对于插槽。
- S槽：对于您的情况，父组件的插槽将是子VNodes of
b-table，因此将插槽重组为一个数组，并将上下文从父级更改为current (如果不正确，则将scopedSlot呈现错误)，然后将它们放入function=h的第三个参数中(或者您可以调用createElement)。有关详细信息，请查看Vue指南:创建元素参数。
无论如何，仔细阅读实现专案的最佳方法，然后你应该能够达到目标。
Vue.config.productionTip = false
Vue.component('table-helper', {
render (h) {
const slots = Object.keys(this.$slots)
.reduce((arr, key) => arr.concat(this.$slots[key]), [])
.map(vnode => {
vnode.context = this._self
return vnode
})
const self = this
return h('div', [
h('b-table', {
on: self.$listeners,
props: Object.assign(self.$props, {currentPage: self.currentPage}),
scopedSlots: self.$scopedSlots,
attrs: self.$attrs
},slots),
h('b-pagination', {
props: self.$props,
domProps: {
value: self.currentPage
},
on: {
input: function (event) {
self.currentPage = event
}
}
})
])
},
//mixins: [{bTable.props}, {bPagination.props}],
props: ['items', 'fields', 'perPage','totaRows'],
data() {
return {
currentPage: 1,
}
}
})
new Vue({
el: '#app',
data() {
return {
fields: [ 'first_name', 'last_name', 'age', 'fullName' ],
users: [
{ isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{ isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
{ isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' },
{ isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{ isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
{ isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' },
{ isActive: true, age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
{ isActive: false, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
{ isActive: false, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
{ isActive: true, age: 38, first_name: 'Jami', last_name: 'Carney' }
]
}
}
})<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue/dist/bootstrap-vue.js"></script>
<div id="app">
<table-helper :items="users" :fields="fields" :per-page="10" :total-rows="users.length">
<template slot="fullName" slot-scope="data">
{{data.item.first_name}} {{data.item.last_name}}
</template>
</table-helper>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51865152
复制相关文章
相似问题
腾讯云开发者
