复盘-----vue---组件传参

定义组件->注册组件->使用组件

eg:监听数值的大小改变圆的大小

<style>
	.cricle{border:1px soild #000;text-align：center；}
</style>
<div id="app">
	//03使用组件
	<steper :num="r" @countchage="r=$event "></steper>
	<div class="cricle" :style="width:r+'px';height:r+'px';borderRadius:r+'px'"></div>
</div>
<script>
    //01定义组件
const steper={
   template：`
	<span>
		<button @click="count--">-</button>
		<input type="text" v-model.number="count" />
		<button @click="count++">+</button>
	</span>
`
	data(){
		return{
			count:this.num
			}
	}
	props:['num'],
	watch:{
		"count":{hanlder(){
			this.$emit("countchange",this.count)//this.$emit("时间名",值)发送一个事件，携带事件值   <steper v-on："事件名"="$event">
		},deep:true}
}
new Vue({
 el:"#app",
 //02注册组件
 components:{steper},
 data(){
 	return {r:100}
 }
})
</script>

父传子 :num="r"传入 props:[num]接收num

子传父 $emit传出事件携带值 @事件名=" r= $event"接收

$event就是 $emit传出的this.count的值

组件插槽

//组件中eg:
<steper><slot><slot><steper>
<steper><p>东方红啦啦啦</p></steper>