VUE入门指北——(3)单文件组件.vue文件

最新推荐文章于 2024-04-30 12:02:41 发布

Nicker2013

最新推荐文章于 2024-04-30 12:02:41 发布

阅读量303

点赞数

分类专栏：前端 # VUE 文章标签：前端 javascript vue.js vue

本文链接：https://blog.csdn.net/Nicker_/article/details/110563168

版权

前端同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

VUE

11 篇文章 2 订阅

订阅专栏

VUE入门指北——(3)单文件组件.vue文件

有一定开发经验的朋友们，特别是有一定面向对象开发经验的，可以跳过中间大量繁琐语法的学习直接去看一些重点功能，毕竟实际开发中用到一些非重点功能的时候再回去看api文档就可以了。
所以从学习路径上来讲，推荐看单文件组件这部分，可以说，你的vue开发直接进入中高级阶段。
任何有一定规模的，具备实际意义的vue项目，往往都会使用到单文件组件。
文件类型为.vue

基本理解

相似功能，可以抽象成一个组件，然后在不同地方使用的时候，都使用这个组件，只是传入的数据参数不同，进行不同的展示和相应的响应效果。
相对于一般的组件，单文件组件具有局部的仅属于自己的props, data，css，用起来更加清爽，不用担心和别的模块参数混淆。
而且使用单文件组件，我们将得到：语法高亮，CommonJS模块，组件作用域的CSS

例子1

一般的vue文件写法，分为上中下三个部分，例如：

<template>
</template>
<script type="text/javascript">
</script>
<style lang="scss" scoped>
</style>

要注意的是这个例子只是说明结构，并无法运行起来。
最上面的<template>部分是用来包裹界面显示部分，可以理解为view层。
中间的script是JavaScript层，可以理解为逻辑层，控制了界面内的交互，以及UI和数据的交互等等。
最下面的style是CSS层，这里可以声明使用scss语法，而scoped则表明其定义只在当前界面生效，不会对其他界面产生影响。

例子2

下面是一个相对功能较多的例子：

<template>
	<div v-if="opened">
		<div @click="onClick">{{msg}}</div>
		<xxxComponent></xxxComponent>
	</div>
</template>
<script type="text/javascript">
import { mapState, mapActions } from "vuex";使用vuex
import xxxComponent from "./xxxComponent";

export default {
  name:"page_template",
  components: {
	xxxComponent,
  },
  data() {
    return {
        msg: 'Hello',
    }
  },
  props:{可传入参数
    opened:{      快捷绑定是否显示
      type:Boolean,
      default:false,
    },
  },
  methods: {内部函数
    onClick(){
      this.$emit("onClick");
    },
  },
  created(){页面创建
  },
  mounted(){页面挂载
  },
</script>
<style lang="scss" scoped>
</style>

例子中，可以看到，一些组件的常用功能，也是vue的特点。
例如:

可传入参数:props定义了一些可传入的参数，例子中的opened结合v-if语句可以用来控制整个组件的div是否可以显示。
内部数据参数：data中的msg为这个component独有，不用担心和其他地方的msg重名而导致数据的相互影响。
如何对外发送消息：显示层中的click绑定了onClick函数，点击之后，对外还能再发送一个onClick消息。
如何引入其他组件：参考xxxComponent的写法
如何使用vuex：参考语句import { mapState, mapActions } from "vuex";。关于vuex，之后另写一篇，专门讲。

关于松散耦合

根据官方文档原话，实际开发中，多数情况下，松散耦合的文件，（也就是这种.vue文件的方式），写起来比完全拆开的3个文件更合理。
个人实际使用的体验也是如此，毕竟大多数组件，其内部的逻辑和其他模块关系不大，另起一个文件会导致需要同时关注的文件变得很多，这样开发过程需要来回切换，还得确认到底是否能够修改，反而拖慢开发速度。
当然，vue也支持拆开，拆开多个文件的写法如下:

<template>
  <div>This will be pre-compiled</div>
</template>
<script src="./my-component.js"></script>
<style src="./my-component.css"></style>

例子3

实际使用例子中的组件。假设组件名为testComponent，在另外一个页面/组件中使用这个组件如下：

<template>
	<testComponent :opened="open_test"></testComponent>	
</template>

<script type="text/javascript">
import testComponent from "./testComponent";
export default {
  components: {
	testComponent,
  },
  data() {
    return {
      open_test: true,
    }
  },
}
</script>