<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>