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

　　好记性不如破电脑，仅仅记录，怕忘了，不喜勿喷

转载于:https://www.cnblogs.com/qq735675958/p/8550874.html