注册全局组件、认识递归组件和动态组件

注册全局组件

当一个组件在很多情况下需要使用的时候,注册全局组件可以让组件不再文件中应用就可以使用虽然IDEA会做自动补全
只需要在main.ts文件中使用app.compontent('name',compontentName)即可

递归组件

在遇到一些需要组件进行自身递归的业务下(树状图,多级菜单栏……),可以使用递归组件实现,递归组件推荐就使用本文件名命名

// Tree.vue

<template>
  <div v-for="item in data" @click.stop="methed(item)"> //获取子组件传来的data
    <input type="checkbox" v-model="item.checked"> <span>{{ item.name }}</span>
    //到此为止,组件只会渲染第一层的数据,此时调用递归组件
    <Tree v-if="item?.children?.length" :data = item.children></Tree>//实现自动递归 用if设置递归结束时的条件,即无子元素
  </div>
</template>

<script>
  //如果要在递归的元素上使用方法,要加上.stop阻止冒泡,不然会导致方法在上一级也被调用一次
  const methed = () => {
      console(item)
  }
  defineProps<{
      data: any
  }>();
</script>

动态组件

即挂载在同一个挂载点,可以进行切换的组件(当然二级路由也可以做到切换组件)
以下是使用动态组件实现按钮切换的样式(别用那该死的v-if)

<template>
  <div style="display: flex">
    <div @click="switchCom(item,index)" :class="[active == index ? 'active' : '']" v-for="(item,index) in data"> //判断当前按钮是否被选中
      <div>
        {{ item.name }}
      </div>
    </div>
  </div>
  <component :is="conId"></component>
</template>

<script>
  import AVue from ""
  import BVue from ""
  import CVue from ""
  //引入三个子组件
  const comId = shallowRef(AVue)//控制展示组件.shallowRef是用于性能调优,我们没有必要去对组件的内容进行劫持,组件直接被更换掉了
  const active = ref(0)//控制选中样式
  const data = reactive([
    {
      name: 'A组件',
      com: AVue
    },
    {
      name: 'B组件',
      com: BVue
    },
    {
      name: 'C组件',
      com: CVue
    },
  ])
  
  const switchCom = (item,index) => {
      comId.value = item.com
      active.value = index
  }
</script>

动态组件能够实现Tab页切换功能,而且避免了大量的v-if,让码不那么屎山

写于综合阅览室