vue3组件化开发

从组件类型来说，Vue中的组件基本可以分为以下几种。

1. 页面组件，每一个页面其实都可以看成是一个Vue的组件，也是我们经常开发的组件。
2. 公共组件，公共组件与业务逻辑无关，页面的任何地方都可以调用，比如常用的一些日期选择组件，弹框提示组件等等。
3. 业务组件，与公共组件的使用没有什么不同，只是和我们的业务逻辑强耦合，基本不太可能需要复用，但因为较为复杂，可能需要拆分成多个组件来开发。

defineProps与defineEmits：

在vue2中我们使用props实现父组件向子组件传值以及使用$emit在子组件中触发方法向父组件传值，但是在Vue3中，使用

defineProps与defineEmits来实现父子组件通信。

使用defineProps来声明props，我们可以使用type规范参数的格式，如下图所示：

import {defineProps} from "vue"
const props = defineProps({
	参数名:{
		//参数类型
		type:String,
		//参数默认值
		default:"你好"
	}
})

使用defineEmits来定义组件的触发事件，用法如下：

const emit = defineEmits(['fn1','fn2'])
const fn3 = () => {
	//触发事件并传参
	emit('fn1',false)
}

vue3的v-model：

在vue2中，使用v-model来实现数据的双向绑定，在vu3中v-omdel的使用更加方便，它包含了数据绑定与事件监听，不需要额外添加监听事件，使用方法如下：

vue3的v-model默认名称改为modelValue和updata:modelValue，它支持使用v-model:text=“modelValue”的方式自定义属性名。

//在父组件中
<子组件
	:modelValue="a"
    @update:modelValue="a = $event"
/>

//子组件中
const emit = defineEmits(['@update:modelValue'])
const fn = () => {
	//更改值为false
	emit("update:modelValue",false)
}

provide与inject：

当我们需要跨层级进行组件间通信时，使用props与emit过于麻烦，可以使用project与inject实现跨层级组件通信。用法如下：

//祖先组件使用provide暴露数据
import {provide} from "vue"
provide(数据名,数据)

//子代组件使用inject接收数据
import {inject} from "vue"
inject(数据名)