组件类型

1. 组合式API

最常见的开发模式，结构如下主要用到了defineProps、defineEmits、defineExpose三个宏函数

<script setup lang="ts">
  import { getCurrentInstance } from 'vue'
  import { propTypes } from '@/utils/propTypes'
  const props = defineProps({
    width: propTypes.string.def('260px'),
  })
  const emit = defineEmits(['change']) //定义emit
  emit('change', 'params')//派发事件
  //属性暴露
  const { uid } = getCurrentInstance()!
  defineExpose({
    uid
  })
</script>
<template></template>
<style lang="less" scoped></style>

2. tsx组件

采用.vue文件的tsx开发模式，方便写样式

<script lang="tsx">
  import { defineComponent } from 'vue'
  import VueTypes from 'vue-types'
  export default defineComponent({
    name: 'TextArryAnimate',
    props: {
      textArray: VueTypes.array
    },
    emits: ['over'],
    setup(props, { emit }) {
      emit('over')//派发

      //渲染模板
      return () => {
        return textArray.value.map((_v, i) => {
          return <p>{curAniText.value[i]}</p>
        })
      }
    }
  })
</script>
<style lang="less" scoped></style>

开发技巧

1. v-bind=“$attrs“

如果用现有组件库二次封装，用v-bind=“$attrs“实现属性跨代传送。

A组件中的值需要直接传给C，那么就需要在B中设置v-bind="$attrs"