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. 刷题日记-JZ25合并有序链表

    合并有序链表 递归方式合并链表pHead1,pHead2 base case是 pHead1为空或者pHead2为空 递归方式是 如果pHead1->val < pHead2->va ...

  2. pip 常用命令小结

    pip 常用命令小结 pip这个工具我们经常会用到,毕竟python 是一门以第三方库庞大而著名的编程语言,所以我们总会用pip 安装一些依赖库,当然这只是pip 最常用的一个命令,下面就来介绍一下 ...

  3. IDEA Dao层快速跳转Mapper.xml 文件的插件

    1.Idea 窗口→File→Setting→Plugins, 2.搜索 Free MyBatis plugin, install,等待安装完成后,Restart IDEA .

  4. c++学习笔记6（结构化程序设计的不足）

    结构化程序设计 c语言使用结构化程序设计: 程序=数据结构+算法 程序有全局变量以及众多相互调用的函数组成 算法以函数的形式实现,用于对数据结构进行操作 结构化程序设计不足 软件业的目标是更快,更正确 ...

  5. Python 爬取 煎蛋

    这个我是拿来参考的 import requests def url_open(url): response = requests.get(url) html = response.content re ...

  6. [hdu6581]Vacation

    首先发现,最终第0辆车一定被堵在某一辆车前,那么等价于它的初始位置就在(那辆车的位置+中间车的车长)/那辆车的速度,其中最大的那个就是答案因此得出结论:$ans=max((\sum_{j=1}^{i} ...

  7. [hdu5379]Mahjong tree

    一棵子树的每一个儿子相当于划分一个区间,同时这些区间一定要存在一个点连续(直接的儿子),因此每一棵树最多只有两个儿子存在子树,并且这两个儿子所分到的区间一定是该区间最左和最右两段,所以ans*=(so ...

  8. [cf1215F]Radio Stations

    这道题如果没有功率的限制,显然就是一个裸的2-sat 考虑将功率的限制也放在图上:如果选择了功率i,那么功率区间不包含它的点只能不选,连边即可 但是这样建图的边数是o(n^2),需要优化 将功率区间分 ...

  9. [noi1994]海盗

    令$a_{i,j}(j\le i)$表示第i个人的方案中给第j个人$a_{i,j}$的钱,有以下性质: 1.如果第j个人一定同意(否则就会死)第i个人的方案,那么$a_{i,j}=0$(容易发现一定同 ...

  10. 如何隐藏shell脚本内容

    从事 Linux 开发的同学,经常需要编写 shell 脚本,有时脚本中会涉及到一些敏感内容,比如一些 IP 地址,用户名以及密码等,或者脚本中有一些关键的代码, 所有这些内容你都不想别人阅读或者修改 ...