阅读背景:

vue props传值方法

来源:互联网 
<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>



你的当前访问异常,请进行认证后继续阅读剩余内容。

分享到: