components/header-nav/menu-nav.vue

<template>
<div>
menu nav
</div>
</template>

components/header-nav/login-nav.vue

<template>
<div>
login nav
</div>
</template>

第一种方法:

components/header-nav/index.js

import MenuNav from "./menu-nav.vue";
import LoginNav from "./login-nav.vue"; export default {MenuNav, LoginNav}

components/header.vue

<template>
<header>
<menu-nav></menu-nav>
<login-nav></login-nav>
</header>
</template>
<script>
import MenuNav from "./header-nav;
import LoginNav from "./header-nav";
export default {
components: MenuNav,LoginNav
};
</script>

第二种方法

<template>
<header>
<menu-nav></menu-nav>
<login-nav></login-nav>
</header>
</template>
<script>
import MenuNav from "./header-nav/menu-nav.vue";
import LoginNav from "./header-nav/login-nav.vue";
export default {
components: {MenuNav,LoginNav}
};
</script>

vue: register and import的更多相关文章

  1. 在vue中使用import()来代替require.ensure()实现代码打包分离

    最近看到一种router的写法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const login = ...

  2. Vue 导入文件import、路径@和.的区别

    ***import: html文件中,通过script标签引入js文件.而vue中,通过import xxx from xxx路径的方式导入文件,不光可以导入js文件. from前的:“xxx”指的是 ...

  3. Element + Vue I18n动态import加载国际化语言包翻译文件

    需求 项目为多页应用,包含产品a.b.c.d.e,每个产品都有自己的翻译文件.一次加载所有翻译文件是极度不合理的.于是考虑动态加载. 实现 参考官方文档:延迟加载翻译 项目结构 │ ├── dist ...

  4. vue中的import {} from '@/api/api'

    例:import {queryDepartTreeList, searchByKeywords} from '@/api/api' 首先查看vue.config.js文件,在这个文件里面定义了定义了@ ...

  5. vue 中使用import导入 script 在线链接

    一般我们在vue中导入另外一个文件或者文件中的方法,我们都是使用import来实现他的,那么问题来了,现在我们要导入的不是另外的一个文件,而是在线链接,这该怎么办?我们也使用了 import * as ...

  6. vue中的import、export、requre的区别

    在es6之前js一直没有自己的模块语法,为了解决这种尴尬就有了require.js的出现.在es6发布之后js又引入了import的概念使得不清楚两者之间的区别的同学在实际使用过程中造成了自己的误解, ...

  7. Vue export和import

    config/index.js export default '123456'; import strs from '@/config';   //此处直接写@config就可以, 如果是export ...

  8. vue中创建js文件使用export抛出函数,import引入后不能绑定HTML的问题

    在es6中使用export和import实现模块化: js文件: export function test(x) { console.log(x); } vue组件: import {test} fr ...

  9. vue使用import来引入组件的注意事项

    Vue使用import ... from ...来导入组件,库,变量等.而from后的来源可以是js,vue,json.这个是在webpack.base.conf.js中设置的: module.exp ...

随机推荐

  1. OleDb未指定错误

    桌面开发,居然也出这种问题: 1. C#读取Excel“未指定错误” http://www.connectionstrings.com/ http://www.dnetzj.com/Content/2 ...

  2. Callable 和Runnable

    1:Callable ,方法调用会有返回值. private void callableTest throws ExecutionException, InterruptedException { E ...

  3. PAT 1102 Invert a Binary Tree[比较简单]

    1102 Invert a Binary Tree(25 分) The following is from Max Howell @twitter: Google: 90% of our engine ...

  4. Linux /proc/pid目录下各文件含义

    /proc 是一个伪文件系统, 被用作内核数据结构的接口, 而不仅仅是解释说明/dev/kmem. /proc 里的大多数文件都是只读的, 但也可以通过写一些文件来改变内核变量. ( Linux 内核 ...

  5. BCB中换行 需要 \r\n

    例如: fprintf(fp,"\n");无换行效果 fprintf(fp,"\r\n");有换行效果

  6. (26)SQLite集成与用法

    概述 在Cocos2d-x中,简单数据存储,可以使用UserDefault.那么如何存储大量,不规则的数据?我们可以使用SQLite数据库存储数据.SQLite是使用非常广泛的嵌入式数据库,它有小巧 ...

  7. 跨域nginx,CORS

    浏览器的同源策略是浏览器上为安全性考虑实施的非常重要的安全策略.从一个域上加载的脚本不允许访问另外一个域的文档属性.举个例子:比如一个恶意网站的页面通过iframe嵌入了银行的登录页面(二者不同源), ...

  8. ng-深度学习-课程笔记-14: 人脸识别和风格迁移(Week4)

    1 什么是人脸识别( what is face recognition ) 在相关文献中经常会提到人脸验证(verification)和人脸识别(recognition). verification就 ...

  9. OpenResty api 网关

    1,Orange网关 Orange是一个基于OpenResty的API网关.除Nginx的基本功能外,它还可用于API监控.访问控制(鉴权.WAF).流量筛选.访问限速.AB测试.动态分流等.它有以下 ...

  10. redis入门学习记录(二)

    继第一节 redis入门学习记录(一)之后,我们来学习redis的基本使用. 接下来我们看看/usr/local/redis/bin目录下的几个文件作用是什么? redis-benchmark:red ...