vue中组件的引用嵌套通过export import语法链接

Nodejs中的 export import

P1.js

export default {

    name: 'P1'

}

index.js

import P1 from './P1.js'

alert(P1.name);

P1.name的内容就是P1.js文件中name的值'P1'

/opt/wks/vue/01_webpack/node_modules/.bin/webpack-cli index.js --output build.js

$ cat index.html

<html>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <script type="text/javascript" src="build.js" charset="utf-8"></script>

    </body>

</html>

打开index.html页面，就会出现一个弹框，内容就是P1

P1.js中export的是一个对象，对象有属性name，index.js文件中import P1相当于前面对外开放对象的一个“引用”，之所以叫“引用”，是因为P1.js中name的值发生变化时，index.js中P1.name也会跟着变化；

“引用”这两个字又加一个引号，是因为export是静态链接，在编辑阶段已经把所关联的内容整合到一体了，

P1.name这个属性在整合后的文件中就一份，它变化了，任何地方对它的访问，当然也能体现这种变化。

vue 中的export import

P1.js变成了P1.vue，文件后缀后变了，不再是纯粹一个JS文件，还可以加入HTML DOM 标签；不同的内容用不同的标签分开

.vue是VUE文件的后缀，视图放于views目录

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

alert(HelloWorld.name);

export default new Router({

  routes: [

    {

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    }

  ]

})

vue demo路由中首先import HelloWorld，HelloWorld.vue的JS部分如下

<script>

export default {

  name: 'HelloWorld',

  data () {

    return {

      msg: 'Welcome to Your Vue.js App'

    }

  }

}

</script>

路由的效果是点击一个URL，能够跳转到一个vue页面，导出的对象本身没有包含vue文件的路径，个人猜测是Router对象会通过“component: HelloWorld” 找到“import HelloWorld from '@/components/HelloWorld'”这一句，然后定位“@/components/HelloWorld”这个文件；必须export的对象本身不包含页面信息，Router必须根据传入的对象参数找到页面

简单说，.vue视图中export与vue中的组件相关联的时候，最终最得的是一个包含JS与DOM的视图

vue2 中的 export import的更多相关文章

  1. ES6中的export,import ,export default

    ES6模块主要有两个功能:export和importexport用于对外输出本模块(一个文件可以理解为一个模块)变量的接口import用于在一个模块中加载另一个含有export接口的模块.也就是说使用 ...

  2. （转）关于ES6的 模块功能 Module 中export import的用法和注意之处

    关于ES6的 模块功能 Module 中export import的用法和注意之处 export default 的用法 export default命令用于指定模块的默认输出.显然,一个模块只能有一 ...

  3. 如何在Vue2中实现组件props双向绑定

    Vue学习笔记-3 前言 Vue 2.x相比较Vue 1.x而言,升级变化除了实现了Virtual-Dom以外,给使用者最大不适就是移除的组件的props的双向绑定功能. 以往在Vue1.x中利用pr ...

  4. Vue2中实现微信分享支付功能

    Vue2中实现微信分享支付功能  近期做了一个微信公众号前后分离项目,前端采用Vue2开发,后端SpringBoot,今天迫不及待的来给大家分享一下这次在开发中遇到的一些坑以及解决办法. 在这里,一些 ...

  5. 程序间数据共享与传递：EXPORT/IMPORT、SAP/ABAP Memory

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  6. PL/SQL developer export/import (转)

    export/import图标为灰色:原因:相关应用程序没有关联菜单栏 --> Tools --> Import Tables... --> Oracle Import Export ...

  7. 自学Zabbix10.1 Configuration export/import 配置导入导出

    自学Zabbix10.1 Configuration export/import 配置导入导出 通过导入/导出zabbix配置文件,我们可以将自己写好的模板等配置在网络上分享,我们也可以导入网络上分享 ...

  8. docker 学习（六） export/import/load/save images

    export/import 是一对命令:   load/save是一对命令 一: export / import使用 1:  查看镜像:  docker ps -a 2:导出镜像:docker  ex ...

  9. JavaScript ES6中，export与export default

    自述: 本来是对new Vue()和export default比较懵的,查了一下,发现我理解错了两者的关系,也没意识到export与export default的区别,先简单的记录一下基本概念,后续 ...

随机推荐

  1. Bootstrap-2栅格系统

    栅格系统(使用最新版本bootstrap) Grid options(网格配置) Responsive classes(响应式class) Gutters(间距) Alignment(对齐方式) Re ...

  2. feign微服务调用携带浏览器信息（header、cookie）

    import feign.RequestInterceptor; import feign.RequestTemplate; import org.apache.commons.collections ...

  3. 图文详解 Java 字节码,让你秒懂全过程

    原文地址:https://blog.csdn.net/AliceSmith1/article/details/80051153 即便对那些有经验的Java开发人员来说,阅读已编译的Java字节码也很乏 ...

  4. [luogu7600]封闭道路

    对于确定的$K$,问题也可以看作每一个点最多选$K$条出边,并最大化选择的边权和 关于这个问题,有如下的树形dp-- 令$f_{k,0/1}$表示以$k$为根的子树中,根节点选择不超过$K/K-1$个 ...

  5. 大厂技术实现 | 腾讯信息流推荐排序中的并联双塔CTR结构 @推荐与计算广告系列

    作者:韩信子@ShowMeAI,Joan@腾讯 地址:http://www.showmeai.tech/article-detail/tencent-ctr 声明:版权所有,转载请联系平台与作者并注明 ...

  6. ant命令

    ant -help 帮助(ant -h) ant -projecthelp 列举xml中重要的部分 (ant -p) ant -version 查看版本 ant -diagnostics 打印所有环境 ...

  7. linux 同时执行多个命令及几个基础命令

    先后不同的命令用分号:隔开即可 基础命令: 1.cd 进入目录 /代表根目录,.代表当前目录,..代表上一级目录 2.ls 显示当前目录下的所有文件和文件夹 -F区分目录和文件,文件后边是*代表可执行 ...

  8. 【BZOJ 4668 冷战】

    题目: [BZOJ 4668 冷战] 思路: 因为考虑强制在线,我们是肯定要维护形状的 我们发现如果\((u,v)\)这条边如果\(u,v\)已经连上,那么对于最终答案这条边是没有贡献的 所以我们发现 ...

  9. SSRF的原理和防范

    背景 最近做的安全测评主要是SSRF,发现自己在这一块有挺大知识盲点,抓紧补一下. 1.介绍 SSRF(Server-Side Request Forgery:服务器端请求伪造),是一种攻击者利用服务 ...

  10. 搜索工具Wox简单使用

    目录 下载安装 几个常用命令 自定义 Wox是快速搜索小工具,内置了everything(需要先安装),但比everything好用.不止是搜文件,网页.系统等都可以快速搜索,还可以自定义. 下载安装 ...