03_组件相关语法
2022-05-07 16:40:07 7 举报AI智能生成
Vue3.x知识图谱 来自 gitee (Vue3.x知识图谱)[https://gitee.com/jishupang/vue3-knowledge-map]
作者其他创作
大纲/内容
基本概念：组件的基本给概念:就是把一个大的功能，拆分成一个个子组件。组件是页面中的一部分。
特点：全局组件只要定义，处处可以使用，性能不高，但是使用起来简单。
组件具备复用性，在一个页面里，可以使用多次。
定义方法：app.component('组件名'，{})
全局组件
局部组件的使用需要进行注册：例如在父组件里：components:{xxx:xxx}
PS：为了和普通变量区分，建议首字母进行大写。
局部组件
子组件中-props接收
父组件中-属性传值
校验方法：props;{content:String} 校验字符串
String
Boolean
Array
Object
Function
Symbol
可校验类型
required:true
非空校验
default: xxx
默认值
validator:function(value){return value<1000} 参数必须小于1000
validator方法校验
校验
父子组件传值
子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据。
基本概念
父组件向子组件传值，但子组件并部接受，这种叫做Non-prop属性。这时候的属性会放到子组件最外层的标签上面。
不展示属性
inheritAttrs:false
绑定传递过来的属性
<div v-bind="$attrs">xxx</div>
v-bind="$attrs"
在子组件中用程序的方法获取父组件传递过来的属性
this.$attrs
Non-prop属性
子组件向父组件传递方法，从而改变父组件里的变量
<div @jspang="handleXxx" >xxx</div>
如果向父组件传递的方法很多，可以在这里醒目标识出来。
单项数据流
<myComp><div></div></myComp>
父组件
<slot></slot>
子组件
<slott>default value</solt>
基础语法：
概念：一个组件里，可以设置多个插槽，然后在父组件里可以写多个<template>来填充这些插槽
基础写法：<template v-slot:header>
简单写法:<template #header>
<slot name="header">
基础语法
具名插槽
当子组件的具体标签输出方式，要有父组件决定时，可以使用作用域插槽。
作用域插槽
slot插槽
概念：根据数据的编号，结合compoent 这个标签，来随时动态切换组件的显示
基础语法：<component :is="xxxx" />
经常和动态组件一起使用
保持状态：<keep-alive></keep-alive>
动态组件
基础语法：Vue.defineAsyncComponent( )
概念：是异步执行某些组件的逻辑，这叫做异步组件
异步组件
Vue3.X组件相关语法
0 条评论
回复 删除
下一页
