<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="hehe">
<h4>{{mmmmmm}}</h4>
<ul>
<li v-for="(item,index) in text">{{item.main}}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'hehe',
props: {
text:{ //此處為要接收的值 text為接收過來key
type:Array, //key不能亂寫
default:''
},
mmmmmm:{ //同上
type:String,
default:'我是默認值'
}
},
data () {
return {
hehe:"222"
}
},
methods:{
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul,li{
list-style: none;
}
ul{
display: flex;
align-items: center;
margin-top: 5px;
}
li{
flex: 1;
text-align: center;
line-height: 40px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
}
h4{
text-align: center;
}
</style>
好記性不如破電腦，僅僅記錄，怕忘了，不喜勿噴