自定义组件嵌入另一个组件
*******************html:**************************
<list-item></list-item>
*****************JavaScript**************************
import listItem from './list-item.vue'
export default {
components:{
listItem
},
************以下写法会报错************************
import list-item from './list-item.vue'
export default {
components:{
list-item
},
//import后推荐接驼峰名
选项卡与内容页面联动
- 内容页面滚动引起选项卡变化
************list.vue 内容页面当前的页码,发送出去*************************
//HTML
<swiper class="home-swiper" :current="activeIndex" @change ="change" >
//JavaScript
methods:{
change(e){
const {current}=e.detail
this.$emit('change', current)
}
}
********************************************************************
*****************index.vue 接收内容页码********************************
//HTML
<list :tab="tabList" :activeIndex="activeIndex" @change="change"></list>
//JavaScript
methods: {
change(current) {
this.tabIndex=current
},
********************************************************************
******************选项卡组件从页面获取内容页码***********************
//***************index.vue***************
//HTML
<tab :list="tabList" @tab='tab' :tabIndex='tabIndex'></tab>
//**************tab.vue***********************
//JavaScript
export default {
props: {
list: {
type: Array,
default () {
return []
}
},
tabIndex:{
type:Number,
default:0
}
},
watch:{
// 监听 data props 值的变化
tabIndex(newVal,oldVal){
this.activeIndex=newVal
}
},
//HTML
<view v-for="(item,index) in list" :key="index" :class="{active:activeIndex===index}"
@click="clickTab(item,index)" class="tab-scoll_item">
{{item.name}}
</view>
******************************************************************
- 选项卡变化引起内容页面滚动
//**************index.vue**********************
//HTML
<!-- 滚动列表组件 -->
<list :tab="tabList" :activeIndex="activeIndex" @change="change"></list>
//JavaScript
methods: {
change(current) {
this.tabIndex=current
},
// 点击标签事件
tab({
data,
index
}) {
console.log(data, index)
this.activeIndex=index
},
//********************list.vue******************************
<swiper class="home-swiper" :current="activeIndex" @change ="change" >
:current="activeIndex"
一定要加最前面的冒号,表示动态变化,写成current="activeIndex"
会报错
懒加载选项页面
用于解决切换页面时,老数据转换成新数据是的卡顿闪烁现象。使页面切换更加平滑
//**********list.vue**********************
data() {
return {
list: [],
listCatchData: {}//数据缓存
};
},
getList(current) {
this.$api.get_list({
name: this.tab[current].name
}).then(res => {
const {
data
} = res
console.log('get_list数据:', data)
// this.list=data
// this.listCatchData[current] = data,将对应分类的数据给缓存的其中一项
this.$set(this.listCatchData, current, data)
})
}
为什么要使用 this.$set(this.listCatchData, current, data)
?
data() {
return {
list: [],
listCatchData: {}//数据缓存
};
},
等价于
data() {
return {
list: [],
listCatchData: {
0:[],
1:[]
}//由于JS的限制,this.listCatchData[current] = data,不会生效。
};
},