5月29

又到了愉快的周五，早上呢继续背我们的面试题，组长也是进行简单的提问，今天感觉背的不是很好，因为提问的时候回答的不是特别好 上午呢老大说了Vue的递归组件，那么递归组件是干嘛的呢？比如有一组数据，有很多层级，如果不用递归的话，我们需要for循环很多次，如果用递归的话，直接可以将这组数据全部展示出来，也很方便

父组件

<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: '手表',
          children: [
            { name: 'iWatch' },
            { name: '小米watch' }
          ]
        }
      ]
    }

  ]

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

<style lang="scss">

</style

子组件

<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)`
    }
  }

下午呢也是对vue路由过了一遍

路由两种形式

1.Hash 带# 【默认】

优点：兼容性好，不需要后端配置
缺点：路径不美观  

2.history :通过/来分隔路径

路由的传参 也是两种

1 params传参

{name:'/user',params:{ name:'1906A' }}"

2 query传参

 {path:'/user',query:{ name:'1906A' }}"

历史回退：

router.go(-1) //返回上一页
this.$route和this.$router的区别是什么
this.$route：获取路由参数
this.$router：跳转页面

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

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

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

命名视图

可以在一个组件中展现多个组件视图

{
    path: '/my',
    component: My,
    //嵌套路由
    children: [
      {
        path: '',
        components: {
        //在My组件中添加2个视图页面
          a: My2,
          b: My3
        }
      }

命名路由

{
    path: '/my',
    name: 'my', //通过给路由命名
    component: My,
 }