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. Go语言核心36讲（Go语言进阶技术十五）--学习笔记

    21 | panic函数.recover函数以及defer语句 (上) 在本篇,我要给你展示 Go 语言的另外一种错误处理方式.不过,严格来说,它处理的不是错误,而是异常,并且是一种在我们意料之外的程 ...

  2. uni-app视频组件设置圆角

    无法实现,建议写个image在中间位置加个播放按钮,点击播放跳转新页面只需要在跳转参数里面把视频链接加上,在onLoad里面获取视频链接,自动播放视频,很多app目前都是这样做的,关闭页面后视频会自动 ...

  3. python与C结构体之间二进制数据转换

    python与C结构体之间数据转换 前言 在实际应用中,可能会遇到直接和C进行二进制字节流协议通信,这时要把数据解包成python数据,如果可能,最好与C定义的结构体完全对应上. python中有2种 ...

  4. 暑假算法练习Day2

    第二天啦!大家一起冲冲冲!! 1004 成绩排名 (20 分) 读入 n(>0)名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式: 每个测试输入包含 1 个测试用 ...

  5. 使用jiava打印一个三角形

    public class ForDemo { public static void main(String[] args) { /* 打印一个5行高的三角形,首先将三角形分成三部分: 第一部分是前面的 ...

  6. ICCV 2021口罩人物身份鉴别全球挑战赛冠军方案分享

    1. 引言 10月11-17日,万众期待的国际计算机视觉大会 ICCV 2021 (International Conference on Computer Vision) 在线上如期举行,受到全球计 ...

  7. 一文带你吃透CLR垃圾回收机制

    前言 今天我们来共同学习一下CLR的垃圾回收机制,这对我们写出健壮性的代码很有帮助,也许有人会认为多此一举,认为垃圾回收交给CLR就行,我不用关心这个,诚然,大多数情况下是这样的,但是,我们今天讨论的 ...

  8. 使用postman对elasticsearch接口调用

    post 新增 get 查询 put更新 post http://127.0.0.1:9200/index4/type1 {"node":0} { "_index&quo ...

  9. [spring-core]作用域

    本文试图从原理上讲解Spring IoC容器的作用域机制,建议对着源码阅读,事半功倍. 0 引入问题 当我们谈到Spring作用域的时候,自然而然会想到如下作用域(来自spring-core官方文档) ...

  10. CentOS7部署ceph

    CEPH 简介 不管你是想为云平台提供Ceph 对象存储和/或 Ceph 块设备,还是想部署一个 Ceph 文件系统或者把 Ceph 作为他用,所有 Ceph 存储集群的部署都始于部署一个个 Ceph ...