（二十二）Vue之单文件组件

忆亦何为

已于 2023-01-06 19:59:35 修改

阅读量405

点赞数 1

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

于 2022-12-23 15:45:17 首次发布

本文链接：https://blog.csdn.net/weixin_45832694/article/details/128420183

版权

Vue 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

文章目录

单文件组件
ES6模块化
演示程序

Vue学习目录

上一篇：（二十一）Vue之非单文件组件

下一篇：（二十三）Vue之脚手架的使用

单文件组件

组件的定义是实现应用中局部功能代码和资源的集合
非单文件组件是在一个文件里面定义众多组件，这会使得结构混乱
而单文件组件就是真正意义上的局部功能代码和资源的集合，整合形成一个个的.vue文件
.vue文件结构如下

<template>
</template>

<script>
</script>

<style>
</style>

template：组件的结构，对应html代码
script：组件交互相关代码，对应js代码
style：组件的样式，对应css代码

ES6模块化

vue文件写完之后，需要使用ES6模块化暴露给外界，让需要使用的文件引入
什么是模块化？
将一个js文件按照功能作用分解为多个js文件
使用模块化可以对不同的功能点进行统一管理，降低耦合性，减少同名的影响。每一个模块都有单独的空间。
对外暴露的三种方式：

1.分别暴露
也叫多行暴露，在引入时需要用对象来引用
写法：在定义变量的时候暴露
例如：export const school = Vue.extend({
2.统一暴露
写法：在代码后面使用export {暴露1,暴露2,…}，暴露只有一个，{}可以去掉
例如export school
3.默认暴露
写法一：在定义时使用export default
写法二：在代码最后使用export default {暴露1,暴露2,…}，暴露只有一个，{}可以去掉
例如：export default {school}

引入：使用import {引入1,引入2,…} from “文件路径”; 同样引入只有一个，{}可以去掉

演示程序

把之前的在非单文件组件定义的Student组件和School组件用单文件组件定义
Student.vue：


<template>
  <div>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生年龄：{{age}}</h2>
    <button @click="showName">点我提示学生姓名</button>
  </div>
</template>

<script>
  export default {
    name:'Student',
    data(){
      return {
        name:'张三',
        age:18
      }
    },
    methods: {
      showName(){
        alert(this.name)
      }
    }
  }
</script>

<style>
</style>

School.vue：

<template>
  <div class="demo">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
    <button @click="showName">点我提示学校名</button>
  </div>
</template>

<script>
  export default {
    name:'School',
    data(){
      return {
        name:'一中',
        address:'广州'
      }
    },
    methods: {
      showName(){
        alert(this.name)
      }
    }
  }
</script>

<style>
  .demo{
    background-color: aqua;
  }
</style>

App.vue：

<template>
  <div>
    <School></School>
    <Student/>
  </div>
</template>

<script>
//引入组件  使用import

import School from "./School";
import Student from "./Student";

export default {
  name: "App",
  components:{
    School,
    Student
  }
}
</script>

mian.js：这个文件一般用于实例Vue，并把App组件结构放入容器当中

import App from './App.vue'

new Vue({
	el:'#root',
	template:`<App></App>`,
	components:{App},
})

index.html：用于展示的容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试单文件组件</title>
</head>
<body>
    <div id="root"></div>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="./main.js"></script>
</body>
</html>

注意：我们打开index.html页面什么都没有，这是因为我们使用了ES6语法，浏览器识别不了，需要在webpack或官方的脚手架里运行才行，这个以后再说。

忆亦何为

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
（二十二）Vue之单文件组件

注意：我们打开index.html页面什么都没有，这是因为我们使用了ES6语法，浏览器识别不了，需要在webpack或官方的脚手架里运行才行，这个以后再说。而单文件组件就是真正意义上的局部功能代码和资源的集合，整合形成一个个的.vue文件。把之前的在非单文件组件定义的Student组件和School组件用单文件组件定义。vue文件写完之后，需要使用ES6模块化暴露给外界，让需要使用的文件引入。非单文件组件是在一个文件里面定义众多组件，这会使得结构混乱。将一个js文件按照功能作用分解为多个js文件。
复制链接

扫一扫