组件相关语法

Vue3.X组件相关语法知识总结，包括全局组件、局部组件、父子组件传值、单项数据流、slot插槽、动态组件、异步组件等。

Vue3.X组件相关语法

• 基本概念：组件的基本给概念:就是把一个大的功能，拆分成一个个子组件。组件是页面中的一部分。
• 全局组件
  • 特点：全局组件只要定义，处处可以使用，性能不高，但是使用起来简单。
  • 组件具备复用性，在一个页面里，可以使用多次。
  • 定义方法：app.component('组件名'，{})
• 局部组件
  • 定义局部组件： const Counter={...}，以变量的形式定义局部组件, 使用时需要进行注册。
  • 局部组件的使用需要进行注册：例如在父组件里：components:{xxx:xxx}
  • PS：为了和普通变量区分，建议首字母进行大写。
• 父子组件传值
  • 父组件中-属性传值
    • 子组件中-props接收
  • 校验
    • 校验方法：props;{content:String} 校验字符串
    • 可校验类型
      • String
      • Boolean
      • Array
      • Object
      • Function
      • Symbol
    • 非空校验
      • required:true
    • 默认值
      • default: xxx
    • validator方法校验
      • validator:function(value){return value<1000} 参数必须小于1000
• 单项数据流
  • 基本概念
    • 子组件可以使用父组件传递过来的数据，但是绝对不能修改传递过来的数据。
  • Non-prop属性
    • 父组件向子组件传值，但子组件并部接受，这种叫做Non-prop属性。这时候的属性会放到子组件最外层的标签上面。
    • inheritAttrs:false
      • 不展示属性
    • v-bind="$attrs"
      • 绑定传递过来的属性
      • <div v-bind="$attrs">xxx</div>
    • this.$attrs
      • 在子组件中用程序的方法获取父组件传递过来的属性
  • this.$emit('jspang','参数')方法
    • 子组件向父组件传递方法，从而改变父组件里的变量
    • <div @jspang="handleXxx" >xxx</div>
  • emits:['aaa','bbb']
    • 如果向父组件传递的方法很多，可以在这里醒目标识出来。
• slot插槽
  • 概念：在调用子组件时，使用两个标签(例如：<myComp><div></div></myComp>),并在中间插入其它HTML标签的形式。然后在子组件中，使用`<slot></slot>`接收，这种就叫做插槽。
  • 基础语法：
    • 父组件
      • <myComp><div></div></myComp>
    • 子组件
      • <slot></slot>
    • 默认值
      • <slott>default value</solt>
  • 具名插槽
    • 概念：一个组件里，可以设置多个插槽，然后在父组件里可以写多个<template>来填充这些插槽
    • 基础语法
      • 父组件
        • 基础写法：<template v-slot:header>
        • 简单写法:<template #header>
      • 子组件
        • <slot name="header">
  • 作用域插槽
    • 当子组件的具体标签输出方式，要有父组件决定时，可以使用作用域插槽。
• 动态组件
  • 概念：根据数据的编号，结合compoent 这个标签，来随时动态切换组件的显示
  • 基础语法：<component :is="xxxx" />
  • 保持状态：<keep-alive></keep-alive>
    • 经常和动态组件一起使用
• 异步组件
  • 基础语法：Vue.defineAsyncComponent( )
  • ES6异步方法：Promise((resolve,reject)=>{})
  • 概念：是异步执行某些组件的逻辑，这叫做异步组件