Vue组件中的export作用

最新推荐文章于 2025-05-06 09:15:40 发布

原创最新推荐文章于 2025-05-06 09:15:40 发布 · 3.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

一、【基础】Vue.Js零基础入门知识总结专栏收录该内容

7 篇文章

订阅专栏

本文介绍了Vue.js中`export`关键字的作用，包括如何通过`export`在组件之间共享变量和方法，避免命名冲突，以及在定义组件属性、数据等方面的应用。通过示例展示了`export default`如何定义组件的数据，并在使用组件时如何通过`export`导入和使用这些数据。

export起什么作用呢？

作用一：在.vue文件中，通过定义export，可以开放这个组件中的变量或方法，给其它模块引用这个文件时，能够使用这些变量或方法。

不得不说，Vue在Js的基础上，做了一个非常好的封装。举个jquery的例子:

a.js:

 function s(){
	return "a";
}

b.js:

 function s(){
	return "b";
}

index.html:

<!doctype html>
<html lang="en">
 <head>
      <meta charset="UTF-8" /> 
      <title>Document</title>
      <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js" ></script>
      <script src="a.js" ></script>
      <script src="b.js" ></script>

 </head>
 <body>
    hello!
 </body>
</html>

结果：

结果是，后面定义的js，会将前面js定义的方法覆盖。

使用export的时候，我们可以指定引用哪一个vue文件的哪个方法，从而避免冲突。

作用二、定义组件的属性、data等

比如我们的一个.vue组件component：

  <template>
  <div>
      <template  v-for="item in list" :key="item.id"> 
          <span>{{item.id}}:{{item.text}}</span>
      </template>
  </div>
   </template>
<script>
export default {
  name: 'AboutView',
  data(){
    return {
      list: [
        {
          id:"1",
          text:"张三"
        },
        {
          id:"2",
           text:"李四"
        },
        {
          id:"3",
          text:"王五"
        }
      ] 
    }
  }
}
</script>

我们动态调用这个components的时候，通过export还可以定义data。