开始是这么写的
现在想要把tab做为一个组件
极客观点
项目管理
HarmonyOS
<tab current="x-current">
<ul class="x-title" slot="tab">
<li>产品介绍</li>
<li>产品介绍</li>
<li>产品介绍</li>
</ul>
<div slot="text">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
</tab>现在问题是：1.事件应该怎么绑定，如果直接写在li或者ul上面，调用组件时候会不会比较复杂；2.我可以在tab组件里面获取ul自己绑定事件，但是这样就跟jq写出来的代码差不多了。
求帮助。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.x-title .active{
color: #f00;
}
</style>
</head>
<body>
<div id="app">
<ul class="x-title" v-for="(item, index) in items" v-on:click="tab(index)">
<li :class="{active: activeIndex === index}">{{item.title}}</li>
</ul>
<div class="x-content">
{{items[activeIndex].content}}
</div>
</div>
<script src="vue.js"></script>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
activeIndex: 0,
items: [
{title: '产品介绍1', content: '1111111111111'},
{title: '产品介绍2', content: '2222222222222'},
{title: '产品介绍3', content: '3333333333333'}
]
},
methods: {
tab: function(index){
this.activeIndex = index;
}
}
})
</script>
</body>
</html>10 回答11.7k 阅读
2 回答3.2k 阅读✓ 已解决
4 回答4.6k 阅读✓ 已解决
3 回答2.7k 阅读✓ 已解决
4 回答2.1k 阅读✓ 已解决
4 回答2.2k 阅读✓ 已解决
3 回答1.2k 阅读✓ 已解决
可以参考下 vux 的实现
地址