vue3组件化开发
从组件类型来说,Vue中的组件基本可以分为以下几种。
- 页面组件,每一个页面其实都可以看成是一个Vue的组件,也是我们经常开发的组件。
- 公共组件,公共组件与业务逻辑无关,页面的任何地方都可以调用,比如常用的一些日期选择组件,弹框提示组件等等。
- 业务组件,与公共组件的使用没有什么不同,只是和我们的业务逻辑强耦合,基本不太可能需要复用,但因为较为复杂,可能需要拆分成多个组件来开发。
defineProps与defineEmits:
在vue2中我们使用props实现父组件向子组件传值以及使用$emit在子组件中触发方法向父组件传值,但是在Vue3中,使用
defineProps与defineEmits来实现父子组件通信。
使用defineProps来声明props,我们可以使用type规范参数的格式,如下图所示:
1 | import {defineProps} from "vue" |
使用defineEmits来定义组件的触发事件,用法如下:
1 | const emit = defineEmits(['fn1','fn2']) |
vue3的v-model:
在vue2中,使用v-model来实现数据的双向绑定,在vu3中v-omdel的使用更加方便,它包含了数据绑定与事件监听,不需要额外添加监听事件,使用方法如下:
vue3的v-model默认名称改为modelValue和updata:modelValue,它支持使用v-model:text=“modelValue”的方式自定义属性名。
1 | //在父组件中 |
provide与inject:
当我们需要跨层级进行组件间通信时,使用props与emit过于麻烦,可以使用project与inject实现跨层级组件通信。用法如下:
1 | //祖先组件使用provide暴露数据 |