<template>
<div class="hello">
<ul>
<li
v-for="(item, index) in type"
@click="handle($event)"
@touchMove='touchMove'
>{{item.main}} --{{index}}</li>
</ul>
<div class="tabc">
<Tabs :text="type" :mmmmmm="msg"></Tabs> //key/value
</div>
</div>
</template>
<script>
import Tabs from './tabs';
export default {
name: 'HelloWorld',
components:{
Tabs
},
data (){
return {
type:[
{main:"切换1"},
{main:"切换2"},
{main:"切换3"}
],
msg:"我是父组件的值" //要传入的值
}
},
methods:{
handle($event){
console.log($event.offsetX)
console.log($event.offsetY)
console.log($event.type)
console.log($event)
},
touchMove(ev) {
ev = ev || event;
ev.preventDefault();
// let btnWidth = this.$refs.remove.offsetWidth; //$refs 减少获取dom节点的消耗
// let btnImg = this.$refs.btnImg.offsetWidth;
console.log(ev);
// console.log(btnWidth);
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background: #ddd;
margin-bottom: 0px;
height: 40px;
line-height: 40px;
}
a {
color: #42b983;
}
</style>
<template>
<div class="hello">
<ul>