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. PAT甲级1074 Reversing Linked List (25分)

    [程序思路] 先根据地址按顺序读入节点,入栈,当栈里的元素个数等于k时全部出栈,并按出栈顺序保存,最后若栈不为空,则全部出栈并按出栈的稀饭顺序保存,最后输出各节点 注意:输入的节点中有可能存在无用节点 ...

  2. IO流(二)

    一:字符流 字符输入流 写入文件字符流 import java.io.FileWriter; import java.io.IOException; //fileWriter public class ...

  3. Java学习（八）

    今天学了类的封装知识与编译器的使用,和c++的大体一致,只有一些细节不同,像private的使用等. 小试牛刀,写了一个封装后的类,并且测试. public class Student { priva ...

  4. [cf787E]Till I Collapse

    考虑对询问分块,对于i<K的询问,暴力处理,时间复杂度为o(Kn):对于i>K的询问,发现答案都小于n/K且满足单调性,那么可以二分出每一段相同的答案,时间复杂度为$o(n^{2}log_ ...

  5. oracle 创建空间索引

    1. 首先进行查询,判断数据是否已经建立相应的空间元数据 select * from user_sdo_geom_metadata t where t.table_name like '%表名%'; ...

  6. c语言是如何处理函数调用的？

    1.  要编译的测试代码: int plus(int x, int y) { return x + y; } int main(void) { return plus(3, 4); } 2. main ...

  7. 用图像识别玩Chrome断网小游戏

    先来看一下效果 正文 最近在学习机器学习方面的知识,想着做个东西玩玩,然后就接触到了TensorFlow这个机器学习框架,这个框架封装了机器学习的一些常用算法. 不过要自己实现一套流程还是比较麻烦,我 ...

  8. IDEA：Git stash 暂存分支修改的代码

    IDEA:Git stash 暂存分支修改的代码 场景:当我们正在master分支开发新功能的时候,突然接到一个任务发现线上出现了一个紧急的BUG需要修复,由于没有打新分支做这部分新需求,这时正做到半 ...

  9. vue进行代码排序

    <template> <div> <div> <h3>排序 </h3> <button @click="orderByAge ...

  10. banner.txt

    Spring Boot Version: ${spring-boot.version} __----~~~~~~~~~~~------___ . . ~~//====...... __--~ ~~ - ...