vue3组件化开发常用API知识点总结

目录

• 组件化思想
• 组件通讯
• $props
• $emits
• $parent
• $attrs
• proviede & inject
• 插槽 slot
• 渲染作用域
• 作用域插槽
• v-model
• 表单组件
• 自定义组件
• 改变默认参数
• 样式绑定相关
• class
• style
• 总结

组件化思想

为什么使用组件化开发？

当前前端比较流行的 Vue React 等框架，都会通过编写组件来完成业务需求，也就是组件化开发。包括小程序开发也会用到组件化开发的思想。

分析组件化思想开发应用程序：

• 将一个完整页面拆分成很多个小组件
• 每个组件用于完成页面的一个功能模块
• 每一个组件还可以细分 （父子组件）
• 通用的组件可以复用到不同的页面

一个 Vue 的页面，应该像是棵嵌套的组件树的形式来组织：

vue3 入口文件：

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

createApp()函数传入了一个App，App 就是一个组件，是项目的根组件。

下面将分析 Vue3 中组件化开发的常用方法。

组件通讯

$props

• $props 用于向子组件传递数据

 $props: {{$props}}