vue3 api文档,vue3.0组合api
Vue是目前最流行的Web前端开发框架技术。下面文章主要介绍vue3组件开发常用API的相关资料。通过示例代码详细介绍，有需要的朋友可以参考一下。
目录
组件化思想组件通信$ props $ emissions $ parent $ attrsprevedinject插槽插槽呈现范围插槽v-model表单组件自定义组件更改默认参数样式绑定相关类样式摘要
组件化思想
为什么使用组件开发？
目前流行的前端框架如VueReact会通过编写组件来完成业务需求，即组件开发。包括小程序开发，也会用到组件开发的思想。
分析组件化思想，开发应用程序；
将一个完整的页面分割成许多小组件。每个组件用来完成页面的一个功能模块。每个组件还可以细分(父子组件)。通用组件可以在不同的页面中重用。Vue页面应像嵌套组件树一样组织：
vue3条目文件：
从“vue”导入{ create app }；
从导入应用程序。/app . vue ；
createApp(应用程序)。挂载( # app )；
createApp()函数传入一个App，App是一个组件，也是项目的根组件。
下面将分析Vue3中组件开发的常用方法。
组件通讯
$props
$props用于传递数据p $props: {{$props}} /p
脚本设置语法sugar需要使用definePropsApi来获取propsconst props=defineProps({
num:数字，
})
$emits
$emit用于调用父组件的方法按钮@click=$emit(add )
增加
/按钮
脚本设置sugar需要使用defineEmitsApi来声明emit button @ click= add { { num } }/button。
const emisses=define emits([ add ])
函数add() {
发出( add )
}
$parent
$parent用于获取父组件实例对象。脚本设置中的组件实例不会公开，直接在模板中使用$parent会返回一个空对象。
要指定要在脚本设置组件中公开的属性，请使用defineExpose编译器宏：
Const parData=ref(父组件数据)；
defineExpose({
帕尔数据，
})
子组件：
p父组件parData: {{$parent.parData}}/p
$attrs
包含不是父范围中的组件属性或自定义事件的属性绑定和事件。子组件：
foo a= a b= b :num= num @ add= add /
在父组件中，$attrs的值是{a: a ， b: b}。
当一个组件没有声明任何属性时，它将包含所有父作用域的绑定，内部组件3354可以通过v-bind=$attrs 传入。这在创建高级组件时非常有用，例如：父组件：
Bar:年龄=18性别=男孩/
组件Bar.vue
P-bind= $attrs 将$attrs对象绑定到当前标签/p
在浏览器中，DOM、年龄和性别作为属性绑定到这个P标签。
在脚本设置中，需要“vue”中的useattrsimport {useattrs}。
const attrs=use attrs()；
console . log(attrs . sex)；//男孩
proviede inject
用于跨级/多级组件通信。父组件有一个提供选项来提供数据，子组件有一个注入选项来开始使用数据。父组件：
提供(用户，孔)；
提供(通过，123456)；
子级组件：
const user=inject( user )；
const pass=inject( pass )；
插槽 slot
用于内容分发，使用slot元素作为承载分发内容的出口。
插槽组件
模板
div :style=s1
插槽名称=head/slot
/div
div :style=s2
插槽名称=foot/slot
/div
/模板
使用上述组件。
插槽组件
模板v形槽：头部
p磁头插槽/p
/模板
模板v形槽：脚
p根槽/p
/模板
/SlotComp
SlotComp组件中具有name属性的插槽内容将被替换。被替换的内容需要使用父组件中的v-slot指令来为该槽提供所需的内容。
渲染作用域
模板v形槽：脚
p根槽/p
{{msg}}
{ {项目}}
/模板
在上面的示例中，{{items}}不会显示数据。
父模板中的所有内容都在父范围内编译；子模板中的所有内容都在子范围内编译。
作用域插槽
让插槽的内容访问仅对子组件可用的数据：
slot name= head :item= items /slot
插槽内容：
模板v-slot:head=slotProps
p v-for= I in slot props . item“{ I } }”/p
/模板
slot元素上绑定的属性称为插槽 prop。现在，在父作用域中，我们可以使用v-slot with value来定义我们提供的slot prop的名称，在本例中是slotProps。
v-model
表单组件
对表单应用v-model实现双向绑定：input v-model=text/
自定义组件
将v-model应用于自定义组件：在父组件中使用自定义组件：
const msg=ref(hello world！);
模型组件v-model= msg /模型组件
相当于：
模型组件
:modelValue=msg
@update:modelValue=msg=$event
/ModelComp
在自定义组件ModelComp.vue中：
const props=defineProps({
模型值：字符串
})
const emisses=define emits([
更新：模型值
])
Const text=ref(请输入.);
//文本改变时执行。
手表(text，()={
发出( update:modelValue ，text . value)；
})
改变默认参数
如上所述，未设置参数时，默认绑定参数为模型值更新：模型值设置v-模型参数：
模型组件v-模型：show= show /模型组件
相当于：
模型组件
:show=showFlag
@update:show=showFlag=$event
/ModelComp
在自定义组件ModelComp.vue中：
const props=defineProps({
显示：布尔型
})
const emisses=define emits([
更新：显示，
])
样式绑定相关
class
类绑定：根据需求动态绑定类样式时，可以使用几种方法。
1.书写：对象语法
button @ click= change color :class= { active:is active }
点击切换我的风格，颜色和样式。
/按钮
const is active=ref(false)；
const changeColor=()={
isActive.value=！isActive.value
}
2.写作：宾语语法
button @ click= change color 2 :class= class 2
点击切换颜色，显示计算属性
/按钮
const isActive2=reactive({
主动：假，
})
const classObj=computed(()={
返回{
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
动态绑定内联样式样式
三种方式：html代码
P: style= {color: colored} 样式绑定/p
P :style=styleObjstyle对象绑定(直接绑定到一个对象，代码更新鲜)/p
P: style= [styleobj，styleobjred]样式数组绑定/p
javascript，javascript
const colorRed=ref(#f00 )
const styleObj=reactive({
fontSize: 30px ，
})
const styleObjRed=reactive({
颜色： #f00 ，
})
代码演示地址github.com/kongcodes/v…
vue3项目将从0开始构建。
总结
关于vue3组件开发常见API知识点的总结这篇文章到此为止。关于vue3组件开发API的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。