Vue组件中的export作用

最新推荐文章于 2024-04-26 17:54:13 发布

Jim-Zheng

最新推荐文章于 2024-04-26 17:54:13 发布

阅读量3.4k

点赞数

分类专栏： # 一、【基础】Vue.Js零基础入门知识总结文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yong550517063/article/details/127824344

版权

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

7 篇文章 10 订阅

订阅专栏

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。

Jim-Zheng

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue组件中的export作用

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

扫一扫