vue1.0.x三种实现tab切换,v-for,props,$parent

文章导航

×
  1. 1. 1.普通tab
  2. 2. 2.props-tab
  3. 3. 3.props-$parent-tab

vue1.0.x三种实现tab切换,v-for,props,$parent,出院后回归vue学习,三种方式实现tab切换的效果,还有更多实现方式,可以下来研究研究,主要是用到了v-for循环tab的切换个数,props父子组件的通信改变当前tab的状态Active,分离出的组件可以复用,便于维护,开发效率加快

1.普通tab

这个不用多数大部分的tab组件都这么写,别说话看代码

普通tab

1
2
3
4
5
6
7
8
9
10
11
12
<div id="example">
<div class="buttons-tab">
<a v-for="(key, value) in tab" class="tab-link button" v-bind:class="{ active: value.isactive }" v-on:click="change(key)">{{value.title}}</a>
</div>
<div class="content-block">
<div class="tabs">
<div v-for="(key, value) in tab" class="tab" v-bind:class="{ active: value.isactive }">
<div>{{value.content}}</div>
</div>
</div>
</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
new Vue({
el: '#example',
data: {
tab: [{
title: 'tab1',
content: 'this is tab1',
isactive: true
}, {
title: 'tab2',
content: 'this is tab2',
isactive: false
}]
},
methods: {
change: function(key) {
this.tab.forEach(function(v){
v.isactive = false
})
this.tab[key].isactive = true
}
}
})

2.props-tab

父组件绑定参数通过props传递,并且在methods里面绑定change事件,用this.changes(key)去调用根组件的changes方法改变hover转态切换tab,并且用watch监听

props-tab

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="example">
<tabs v-bind:hover="hover" v-bind:changes="changes"></tabs>

<template id="tabs">
<div class="buttons-tab">
<a v-for="(key, value) in tab" class="tab-link button" v-bind:class="{ active: value.isactive }" v-on:click="change(key)">{{value.title}}</a>
</div>
</template>

<content v-bind:hover="hover"></content>

<template id="content">
<div class="content-block">
<div class="tabs">
<div v-for="(key, value) in list" class="tab" v-bind:class="{ active: value.isactive }">
<div>{{value.content}}</div>
</div>
</div>
</div>
</template>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
// 注册子组件
Vue.component('tabs', {
name: 'tabs',
template: '#tabs',
props: ['hover', 'changes'],
data() {
return {
tab: [{
title: 'tab1',
isactive: true
}, {
title: 'tab2',
isactive: false
}]
}
},
methods: {
change: function(key) {
this.changes(key);
}
},
watch: {
hover: function(val, oldVal) {
this.tab.forEach(function(v) {
v.isactive = false
})
this.tab[val].isactive = true
console.log(1)
}
}
})

Vue.component('content', {
template: '#content',
props: ['hover'],
data() {
return {
list: [{
content: 'this is tab1',
isactive: true
}, {
content: 'this is tab2',
isactive: false
}]
}
},
watch: {
hover: function(val, oldVal) {
this.list.forEach(function(v) {
v.isactive = false
})
this.list[val].isactive = true
console.log(1)
}
}
})

// 创建根实例
new Vue({
el: '#example',
data: {
hover: 0
},
methods: {
changes: function(key) {
this.hover = key
}
}
})

3.props-$parent-tab

父组件绑定参数通过props传递,并且在methods里面绑定change事件,使用this.$parent.hover = key 来切换,根组件就无需再注册methods方法

props-$parent-tab

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div id="example">
<tabs v-bind:hover="hover"></tabs>

<template id="tabs">
<div class="buttons-tab">
<a v-for="(key, value) in tab" class="tab-link button" v-bind:class="{ active: value.isactive }" v-on:click="change(key)">{{value.title}}</a>
</div>
</template>

<content v-bind:hover="hover"></content>

<template id="content">
<div class="content-block">
<div class="tabs">
<div v-for="(key, value) in list" class="tab" v-bind:class="{ active: value.isactive }">
<div>{{value.content}}</div>
</div>
</div>
</div>
</template>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// 注册子组件
Vue.component('tabs', {
name: 'tabs',
template: '#tabs',
props: ['hover'],
data() {
return {
tab: [{
title: 'tab1',
isactive: true
}, {
title: 'tab2',
isactive: false
}]
}
},
methods: {
change: function(key) {
this.tab.forEach(function(v){
v.isactive = false
})
this.tab[key].isactive = true
this.$parent.hover = key
}
}
})

Vue.component('content', {
template: '#content',
props: ['hover'],
data() {
return {
list: [{
content: 'this is tab1',
isactive: true
}, {
content: 'this is tab2',
isactive: false
}]
}
},
watch: {
hover: function(val, oldVal) {
this.list.forEach(function(v){
v.isactive = false
})
this.list[val].isactive = true
console.log(this.$parent)
}
}
})

// 创建根实例
new Vue({
el: '#example',
data: {
hover: 0
}
})

版权声明: 本文章采用 知识共享署名 2.5 中国大陆许可协议 进行许可,欢迎转载,但转载请注明来自李立冬博客,并保持转载后文章内容的完整。本人保留所有版权相关权利。
本文链接:http://www.lilidong.cn/2016/11/30/vue1.0.x三种实现tab切换/

分享到: 更多