TabBar组件开发过程中bug记录

1.组件导入导出命名问题

项目文件结构如下

App.vue代码如下

<template>
  <div id="app">
    <tab-bar>
      <tab-bar-item> </tab-bar-item>
      <!--中间代码省略-->
    </tab-bar>   
  </div>
</template>

<script>
import TabBar from "./components/tabbar/TabBar"
import TabBarItem from "./components/tabbar/TabBarItem"

export default {
  name: 'App',
  components: {
    TabBar,
    TabBarItem
  }
}
</script>

<style>
  @import './assets/css/base.css';  
</style>

• import的变量名称和components中注册要一致
• components中的注册(es6对象写法)

components: {
    TabBar,
    TabBarItem
  }

上述写法即为以下

components: {
    'Tabbar':TabBar,
    'TabBarItem':TabBarItem
  }

也就是说这个组件名称是TabBar和TabBarItem，其内容由import的两个变量赋值，在使用时，这个组件的标签名为TabBar

• 组件名
  注册时名称为'TabBar'
  使用时为<tab-bar>or<TabBar>

2.组件导出name属性

export default {
  name: "app",
  props: {
    path: String
  },
  data(){
    return{
      isActive: true
    }
  },
  methods: {
    itemClick(){
      this.$router.replace(this.path)
    }
  }
}

这个name属性不要混淆啊，递归组件中使用（还没接触），还有后续vue router中的指代某个组件（等我写个keep-alive的使用文章）

3. vue报错：Unknown custom element: router-view - did you register the component correctly

路由文件 router.js

import Vue from 'vue'
import VueRouter from 'vue-router'

const Profile = () => import ('../views/profile/profile.vue')

Vue.use(VueRouter)

//a.定义路由
const routes = [
{
    path: '/profile',
    component: Profile
}
]
//b.创建router实例，并传入routes路由配置
const router = new VueRouter({
    routes
})

export default router

a和b中的命名是有规则的，官方要求路由定义为routes，路由实例为router
所以传入路由配置时

const router = new VueRouter({
    routes //相当于routes：routes
})

采用这种写法，那么路由定义是变量必须写作routes

main.js中注册路由实例时

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router, //相当于router：router
  render: h => h(App)
})

所以import时，后面跟着router（必须），挂载Vue实例中也是router