Vue中components几个组件

一、组件(components)，意义以及对它的理解？

组件：一个小的功能分区；

意义：复杂项目拆分简单的组件，让团队开发更高效，组件是可以重复使用的模块；

理解：组件其实就是个小的vue，具有data，methods，watch，computed；

二、组件的用法

组件的定义：

const steper = {
			template:`<span>
			<button @click="num--">-</button>
			<input v-model.number="num"/>
			<button  @click="num++">+</button>
			</span>`
			},

组件的注册：

Vue.createApp({
				// 注册组件
				components:{steper},
				data() {
					return {
						w1:30,
						w2:20
					}
				}
			}).mount("#app")

组件的使用：

<steper>...</steper>

三、组件的参数传递

1、父传子(props)：<stepr:value="5">

steper 内部

        props:{
				value:{
					type:Number,  //value类型是数字
					default:1 //默认值1
				}
			},

steper内部使用(只读，不能修改)

   this.value

2、子传父(emit事件)

在steper内部
this.$emit("numchange",this.num)
numchange事件名称，this.num 事件值

父组件

<steper @numchange="w1=$event">
$event 就是子组件通过numchange传递过来的值 this.num

四、插槽