vue3组件化

如果我们的一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变得非常臃肿且不好维护，所以组件化的核心思想就是对组件进行拆分，拆分成一个个小的组件
组件化优点:可维护性和扩展性强

父子组件通信

• 在父组件中请求数据，需要子组件来显示
• 子组件中发生了事件，需要父组件来完成某些操作
• 父传子：通过props属性
• 子传父：通过$emit触发事件

父传子

父组件中有些数据，需要子组件来进行展示，这时我们可以通过props来完成组件通信

props是什么？

props是你可以在组件上注册一些自定义的attribute，父组件给这些attribute赋值，子组件通过attribute的名称来获取到对应的值

props两种常见用法：

方式一：字符串数组，数组中的字符串就是通过attribute的名称

props：["title","content"]

方式二：对象类型。对象类型我们可以在指定attribute名称的同时，指定她需要传递的类型，是否是必须的，默认值等

props：｛
	//指定类型
	title：String,
	//指定类型，同时指定是否必选，默认值
	content：｛
	type:String,
	require:true,
	default:"哈哈哈"
	｝
｝

补充

type类型

String Number Boolean Array Object Date Function Symbol

对象类型的其他写法

props：｛
	//多个可能的类型
	propA:[String,Number],
	// 带有默认值的对象
	PropB:{
		type:Object,
		// 对象或数组默认值必须从一个工厂函数获取
		default(){
			return {message:'hello'}
		}
	},
	//自定义验证函数
	propC:{
		validator(value){
			//这个值必须匹配下列字符串中的一个
			return ['success','warning','danger'].includes(value)
		}
	},
	//具有默认值的函数
	propD:{
		type:function,
		//与对象或数组默认值不同，这不是一个工厂函数，这是一个用作默认值的函数
		default(){
			return 'Default function'
		}
	}
｝

prop的大小写命名

• HTML中的attribute大小写不敏感，所以浏览器会把所有大写字符解释为小写字符。
• 这意味着当你使用DOM中的模板时，camelCase(驼峰命名法)的prop名需要使用其等价的kebab-case(短横线分隔命名)命名。

<div>
	<show-message messageInfo="啊哈哈"/>
	<show-message message-info="啊哈哈"/>
</div>

子传父

• 当子组件中有一些事件发生的时候，比如在组件中发生了点击，父组件需要切换内容
• 子组件有一些内容想要传递给父组件的时候

步骤

1. 在子组件中定义好在某些情况下触发的事件名称
2. 在子组件中发生某个事件的时候，根据事件名称触发对应的事件
3. 在父组件中以v-on的方式传入要监听的事件名称，并且绑定到对应的方法中

//子组件
<template>
<div>
	<button @click="increment(item)">+1</button>
	<button @click="decrement(item)">-1</button>
</div>
</template>
methods:{
	increment(item){
		this.$emit("addOne")
	},
	decrement(item){
		this.$emit("subOne")
	}
}
//父组件
<template>
	<div>
		<h2>当前计数：{{counter}}</h2>
		<counter-operation @addONe='add' @subOne='sub'></counter-operation>
	</div>
</tempalte>
methods:{
	add(){
		this.counter++
	},
	sub(){
		this.counter--
	}
}

自定义事件的参数和验证

自定义事件的时候，我们也可以传递一些参数给父组件

incrementTen(){
	this.$emit('addTen',10)
}

在vue3当中，我们可以对传递的参数进行验证

addTen(payload){
	if(payload === 10){
		return true
	}
	return false
}

非父子组件的通信