首页 / VUE / vue2 中的 export import

vue2 中的 export import

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue2 中的 export import，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1591字，纯文字阅读大概需要3分钟。

内容图文

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 defaultnew 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的视图

 

原文：https://www.cnblogs.com/perfei/p/13762407.html

内容总结

以上是互联网集市为您收集整理的vue2 中的 export import全部内容，希望文章能够帮你解决vue2 中的 export import所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1181117.html

来源：【匿名】