Vue组件中的export作用

作用一：在.vue文件中，通过定义export，可以开放这个组件中的变量或方法，给其它模块引用这个文件时，能够使用这些变量或方法。不得不说，Vue在Js的基础上，做了一个非常好的封装。我们动态调用这个components的时候，通过export还可以定义data。使用export的时候，我们可以指定引用哪一个vue文件的哪个方法，从而避免冲突。结果是，后面定义的js，会将前面js定义的方法覆盖。作

Jim-Zheng

3667人浏览 · 2022-11-13 21:01:29

Jim-Zheng · 2022-11-13 21:01:29 发布

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。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^