vue2 中的 export import

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

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

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 的全部内容， 来源链接： utcz.com/z/379184.html

回到顶部