v_Cloud
2019-02-27 10:47vue 构建tabs组件,插槽slots内容更新问题
在构建tab组件的时候,涉及内容更新遇到问题
在更新内容的时候,总会延迟一步更新插槽内容
在跟某课网学习过程中,他的方案是把插槽内容封装成组件,插槽数据当成props传入,以此来解决这个问题
<script type="text/jsx">
import TabContainer from './tab-container.vue'
export default {
name: 'Tabs',
components:{
TabContainer
},
provide () {
const data = {}
Object.defineProperty(data, 'value', { // 时时get数据,get方法
get: () => this.value,
enumerable: true
})
return {
value : this.value,
data
}
},
data () {
return {
panes: []
}
},
props: {
value: {
type: [String, Number],
required: true
}
},
render () {
const contents = this.panes.map(pane => {
return pane.active ? pane.$slots.default : null
})
return (
<div class='tabs'>
<ul class='tabs-header'>
{this.$slots.default}
</ul>
<div className="tab-content">
{contents}
</div>
<tab-container panes={this.panes}></tab-container>
</div>
)
},
methods:{
onChange (index) {
this.$emit('change', index)
}
}
}
</script>
拆分的组件代码
<script type="text/jsx">
export default {
props: {
panes: {
type: Array,
required: true
}
},
render () {
const contents = this.panes.map(pane => {
return pane.active ? pane.$slots.default : null
})
return (
<div class="tab-content">
{contents}
</div>
)
}
}
</script>
- 点赞
- 回答
- 收藏
- 复制链接分享
1条回答
为你推荐
- vue子组件传了参数,又如何获取v-for里面的index下标?
- vue.js
- 2个回答
- vue子组件如何动态传数据给父组件?
- html5
- javascript
- vue.js
- node.js
- jquery
- 4个回答
- Vue项目的 axios使用问题
- vue.js
- 1个回答
- VUE项目找到某个组件,求大佬指教
- vue.js
- 1个回答
- 父组件外部的Vue内容呈现
- vue.js
- javascript
- laravel
- php
- 3个回答
换一换