vue一个组件能拆分成多个组件递归吗

Posted 2023-05-16

当然可以，但是在拆分组件时，我们需要谨慎考虑，因为过度拆分可能会导致组件变得复杂，影响开发效率。我们应该根据项目的实际需求，合理拆分组件，使组件结构清晰，便于维护和管理。 参考技术A 是的，Vue 组件可以递归拆分，可以将一个组件拆分成多个组件，以满足不同的需求和功能。

递归组件与vue路由

递归：函数自己调用自己

//递归可以将复杂的问题简化
//递归特征：必须有一个能结束递归的条件

例如：
1.阶乘
function jiecheng(n) {
  
   if(n===1) return 1;

   return n * jiecheng(n-1)

}

2.fibonaci数列
function fibonaci(n) {

   if(n<=2) return 1;

   return fibonaci(n-1)+fibonaci(n-2);

}

组件自己调用自己的name名来实现递归调用 添加一个显示和隐藏的功能

具体代码如下：
父组件(my.vue)代码：

<template>
    <div>
        <tree-com
            :title="treeObj.name"
            :list="treeObj.children"
            :depth="0">
        </tree-com>
    </div>
</template>

<script>
import TreeCom from ‘../components/tree‘

// 模拟一个树形结构【注意：应该是后台返回的数据】
const treeObj = {
  name: ‘电子产品‘,
  children: [
    {
      name: ‘电视‘,
      children: [
        {
          name: ‘philips‘,
          children: [
            { name: ‘philips-A‘ },
            { name: ‘philips-B‘ }
          ]
        },
        { name: ‘Tcl‘ },
        { name: ‘海信‘ }
      ]
    },
    {
      name: ‘电脑‘,
      children: [
        { name: ‘Mac Air‘ },
        { name: ‘Mac Pro‘ },
        {
          name: ‘ThinkPad‘,
          children: [
            { 
              name: ‘ThinkPad-A‘,
              children:[
                {name:‘ThinkPad-A-A‘},
                {name:‘ThinkPad-A-B‘},
                {name:‘ThinkPad-A-C‘},
            ] },
            { name: ‘ThinkPad-B‘ }
          ]
        }
      ]
    },
    {
      name: ‘可穿戴设置‘,
      children: [
        {
          name: ‘手表‘,
          children: [
            { name: ‘iWatch‘ },
            { name: ‘小米watch‘ }
          ]
        }
      ]
    }

  ]

}
export default {
  name: ‘my‘,
  data () {
    return {
      treeObj
    }
  },
  components: { TreeCom }
}
</script>

<style lang="scss">

</style>

树形组件（tree.vue）代码：
<template>
    <div>
        <div class="title" :style="indent" @click="toggle">
           <span>{{ isShow ? ‘-‘:‘+‘ }}</span>
           {{ title }}
        </div>
        <div v-if="isShow">
            <tree-com
                v-for="(item,index) in list"
                :key="index"
                :title="item.name"
                :list="item.children"
                :depth="depth+1"   //树形样式缩进
            >
        </tree-com>
        </div>
    </div>
</template>

<script>
export default {
  name: ‘tree-com‘, // 通过组件自身的name来实现组件的递归调用
  data () {
    return {
      isShow: true, //显示或隐藏状态控制
    }
  },
  props: {
    title: {  //当前接收要显示的标题
      type: String,
      default: ‘名称‘
    },
    list: {  //要递归的数组
      type: Array
    },
    depth: { //显示层级
      type: Number,
      default: 0
    }
  },
  computed: {
    //通过计算属性计算缩进样式
    indent () {
      return `transform:translate(${this.depth * 20}px)`
    }
  },
  methods: {
   //切换显示隐藏状态
    toggle () {
      this.isShow = !this.isShow;
    }
  }
}
</script>

<style lang="scss">

</style>

 

vue路由（实现单页应用的技术或称SPA）

 

前端路由实现原理：

浏览器哈希值:在浏览器url地址后面添加#/名子，如果改变哈希值，通过onhashchange可以监听到到变化

参考资料：https://blog.csdn.net/sunxinty/article/details/52586556

通过浏览器H5暴露的History API
参考mdn的history官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/History

参考博客：https://www.zhangxinxu.com/wordpress/2013/06/html5-history-api-pushstate-replacestate-ajax/

Vue路由模式有哪几个:

通过mode来设置Vue路由模式：

? hash:,带# 【默认】

优点：兼容性好，不需要后端配置
缺点：路径不美观  例如：http://127.0.0.1:9999/#/shopping

? history:通过/来分隔路径

优点：路径美观 http://127.0.0.1:9999/shopping 缺点：有兼容性和需要后端配置，如果后端不配置路径重定义，点击页面会报打不开的错误 

 

 

Vue路由懒加载

例如：const Home = () => import(‘../views/home.vue‘);

Vue路由如何传参，动态路由

query传参:
 1.视图传递：

      <router-link to="/路径?名称=会传递的值">内容</router-link>
      或
      <router-link :to="{path:‘/user‘,query:{ name:‘1906A‘ }}">内容</router-link>
      

  注意：不用配置路由配：
  

  3.视图接收:
  <div>User {{ $route.query.name }}</div>‘

  在JS中接收：
  this.$route.pquery.name
  

params传参

  1.视图传递：

      <router-link to="/路径/会传递的值">内容</router-link>
      例如：
      <router-link to="/user/1906A">/user/bar</router-link>

  2.路由配置：
  const router = new VueRouter({
    routes: [
      { path: ‘/user/:name‘, component: User }
    ]
  })

  3.视图接收:
  <div>User {{ $route.params.id }}</div>‘

  在JS中接收：
  this.$route.params.id
  
  
  参考官方文档:https://router.vuejs.org/zh/guide/essentials/navigation.html

历史回退：

router.go(-1) //返回上一页

this.$route和this.$router的区别是什么

this.$route：获取路由参数
this.$router：跳转页面

路由404页

  { // 匹配不符合上面路径的路由
    path: ‘/*‘,
    component: NotFound
  }

响应路由参数的变化

动态路由传参：如果给一个路由组件传递不同参数，如何响应参数的变化，主要通过watch来监听$route
watch:{
    $route(to,from) {
      console.log(‘watch:‘,to.params.type)
    }
  },

嵌套路由:可以实现二级路由，三级路由。。。。。

通过配置路由的children和要在哪个页面展示对应路由的router-view配合实现

例如：
{
    path: ‘/my‘,
    component: My,
    children: [
      { //配置默认的二级路由
        path: ‘‘,
        component: My1
      },
      {
        path: ‘my2‘,
        component: My2
      },
      {
        path: ‘my3‘,
        component: My3
      }
    ]
  },