组件化思想为什么使用组件化开发？
当前前端比较流行的 vue react 等框架，都会通过编写组件来完成业务需求，也就是组件化开发。包括小程序开发也会用到组件化开发的思想。
分析组件化思想开发应用程序：
将一个完整页面拆分成很多个小组件
每个组件用于完成页面的一个功能模块
每一个组件还可以细分 （父子组件）
通用的组件可以复用到不同的页面
一个 vue 的页面，应该像是棵嵌套的组件树的形式来组织：
vue3 入口文件：
import { createapp } from 'vue';import app from './app.vue';createapp(app).mount('#app');
createapp()函数传入了一个app，app 就是一个组件，是项目的根组件。
下面将分析 vue3 中组件化开发的常用方法。
组件通讯$props$props 用于向子组件传递数据
<p> $props: {{$props}} </p>
<script setup> 语法糖中需要使用 definepropsapi获取props
const props = defineprops({ num: number,})
$emits$emit 用于调用父级组件的方法
<button @click="$emit('add')"> add</button>
<script setup> 语法糖中需要使用 defineemitsapi声明emits
<button @click="add">{{ num }}</button>const emits = defineemits(['add'])function add() { emits('add')}
$parent$parent用于获取父组件实例对象。
<script setup> 中组件实例不会暴露出来，直接在模板中使用$parent会返回一个空对象。
为了在 <script setup> 组件中明确要暴露出去的属性，使用 defineexpose 编译器宏：
const pardata = ref("父组件数据");defineexpose({ pardata,})
子组件：
<p>父组件 pardata: {{$parent.pardata}}</p>
$attrs包含了父作用域中不作为组件 props 或自定义事件的 attribute 绑定和事件。
子组件：
<foo a="a" b="b" :num="num" @add="add" />
在父组件中，$attrs 的值就是 { "a": "a", "b": "b" }。
当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——这在创建高阶的组件时会非常有用，举个例子：
父组件：
<bar :age=18 sex="boy" />
子组件 bar.vue
<p v-bind="$attrs">将$attrs对象绑定到当前标签</p>
在浏览器查看dom，age 和 sex作为属性被绑定到了这个p标签上面。
<script setup>中，需要使用useattrs
import { useattrs } from 'vue';const attrs = useattrs();console.log(attrs.sex); // boy
proviede & inject用于跨层级/多层级的组件通信
父组件有一个 provide 选项来提供数据，子组件有一个 inject 选项来开始使用这些数据。
父级组件:
provide("user", "kong");provide("pass", 123456);
子孙级组件:
const user = inject("user");const pass = inject("pass");
插槽 slot用于内容分发，将 <slot> 元素作为承载分发内容的出口。
slotcomp 组件
<template> <div :> <slot name="head"></slot> </div> <div :> <slot name="foot"></slot> </div></template>
使用上面的组件
<slotcomp> <template v-slot:head> <p>head插槽</p> </template> <template v-slot:foot> <p>foot插槽</p> </template> </slotcomp>
slotcomp 组件中带 name属性的 slot插槽内容，会被替换。被替换的内容 需要在父组件中使用 v-slot指令为插槽提供想要显示的内容。
渲染作用域 <template v-slot:foot> <p>foot插槽</p> {{msg}} {{items}} </template>
上面的例子，{{items}} 不会显示数据。
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
作用域插槽让插槽的内容访问子组件才有的数据：
<slot name="head" :item="items"></slot>
插槽内容：
<template v-slot:head = "slotprops"> <p v-for="i in slotprops.item">{{i}}</p> </template>
绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在，在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字，本例中就是slotprops。
v-model表单组件将 v-model 应用在表单上面，实现双向绑定：
<input v-model="text" />
自定义组件将 v-model 应用在自定义组件上面：
父组件中使用自定义组件：
const msg = ref('hello world!');<modelcomp v-model="msg"></modelcomp>
相当于：
<modelcomp :modelvalue="msg" @update:modelvalue="msg = $event" > </modelcomp>
自定义组件modelcomp.vue中：
const props = defineprops({ modelvalue: string})const emits = defineemits([ "update:modelvalue"])const text = ref("请输入..");// text改变时执行watch(text,()=>{ emits("update:modelvalue",text.value);})
改变默认参数未设置参数时如上，默认绑定的参数是 modelvalue update:modelvalue
设置v-model参数：
<modelcomp v-model:show="show"></modelcomp>
相当于：
<modelcomp :show="showflag" @update:show="showflag = $event" > </modelcomp>
自定义组件modelcomp.vue中：
const props = defineprops({ show: boolean})const emits = defineemits([ "update:show",])
样式绑定相关classclass绑定：根据需求动态绑定class样式时可以使用一下几种方法
写法1：对象语法
<button @click="changecolor" :class="{ active: isactive }"> 点击切换我的文体颜色样式</button>const isactive = ref(false);const changecolor = () => { isactive.value = !isactive.value;}
写法2：对象语法
<button @click="changecolor2" :class="classobj"> 点击切换颜色，根据计算属性</button>const isactive2 = reactive({active: false,})const classobj = computed(() => {return { active: isactive2.active, 'font-30': true,}})const changecolor2 = () => {isactive2.active = !isactive2.active}
写法3：数组语法
<div :class="[activeclass, errorclass]"></div>
三目运算符写法
<div :class="[isactive ? activeclass : '', errorclass]"></div>
数组语法中结合对象语法使用
<div :class="[{ active: isactive }, errorclass]"></div>
style动态绑定行内style样式
三种方式：html代码
<p :>style绑定</p>
<p :>style对象绑定(直接绑定到一个对象，代码更清新)</p>
<p :>style数组绑定</p>
js 代码
const colorred = ref('#f00')const styleobj = reactive({ fontsize: '30px',})const styleobjred = reactive({ color: '#f00',})
以上就是vue3组件化开发常用api知识点有哪些的详细内容。