vue组件化开发手机底部导航栏

父子组件关联建立

第一步，创建一个parent.vue

然后我们在router底下的index.js中配置该vue为node项目的首页面

import Parent from '@/components/Parent'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Parent',
      component: Parent
    }
  ]
})

有了这两步我们就可以子在该项目文件下，按住shift鼠标右键，选择在此处打开命令浦，然后npm run dev;

开启服务器，访问localhost：8080/就应该能看到父类组件的内容

第二步创建子类组件(Child.vue)，父组导入子类组件

子组件长这样

父类要改成

这样我们给这两个组件建立了组件引入关系，在父组件中引入的子组件应该能显示在浏览器下

父子组件导航栏的思路

子组件