探索学习 Vue 组件篇第七篇组件类型：单文件组件

一平米

已于 2022-07-24 14:01:44 修改

阅读量313

点赞数 1

分类专栏： vue 文章标签： vue.js javascript 学习

于 2022-07-24 07:21:42 首次发布

本文链接：https://blog.csdn.net/pymxb1991/article/details/125942980

版权

vue 专栏收录该内容

25 篇文章 2 订阅

订阅专栏

文章目录

探索学习 Vue 组件篇
- 第七篇组件类型：单文件组件

探索学习 Vue 组件篇

Vue 官网： https://cn.vuejs.org/v2/guide/forms.html
尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 https://www.bilibili.com/

第七篇组件类型：单文件组件

这一节进入单文件的学习，让我们对Vue项目开发整体项目结构的初步了解从 main.js index.html 到 App.vue 再到Student.vue School.vue 从入口文件到页面应用组件有一个清晰的认识

1. 回顾

回顾一下组件的定义是啥： 实现界面局部功能代码和资源的集合叫组件
一个标准的组件需要有三个元素：
- 1、页面也就 html ;
- 2、样式也就是CSS ;
- 3、数据也就是js处理的交互数据
在Vue中也是如此定义的
- 组件的结构(页面)
  - <template></template>
- 组件的交互相关代码(数据、方法等等)
  - <script></script>
- 组件的样式(css)
  - <style></style>

2. 非单文件组件到单文件组件的进阶

2.1. 组件的结构

<template></template>

   <template>
       <div>
           <h2>学校名称：{{schoolName}}</h2>
           <h2>学校地址：{{schoolAddress}}</h2>
           <button @click='showName'>点我显示学校名</button>
       </div>
   </template>

2.2. 组件的交互

<script></script>

直接把之前写的代码复制到交互代码部分

     <script>
     const school = Vue.extend({
         data(){
             return {
                 schoolName: '天津安锐捷大学',
                 schoolAddress: '普天科技园'
             }
         },
         methods: {
             showName(){
                 console.log("组件实例对象：",this)
             }
         },
     })
     </script>

注意这种做法其实是不对的，我们这边写的终规是组件，以后都是要引入(import )用的(es6 模块化知识)，所以这块是需要暴露出去的

有三种暴露的方式

1、分别暴露：export const school = Vue.extend({……})

2、统一暴露: 写到最后

     const school = Vue.extend({……})
     export {school}

3、默认暴露：

    const school = Vue.extend({……})
   export default {school}

一般情况下，我们使用默认暴露：

精简一下默认暴露:定义的这个中转变量可以精简，如下

    export default Vue.extend({
        data(){
            return {
                schoolName: '天津安锐捷大学',
                schoolAddress: '普天科技园'
            }
        },
        methods: {
            showName(){
                console.log("组件实例对象：",this)
            }
        },
    })

精简一下默认暴露:创建组件也是可以精简的，创建组件时 Vue.extend() 默认是可以省略的，直接暴露配置对象，如下

  export default {
      data(){
          return {
              schoolName: '天津安锐捷大学',
              schoolAddress: '普天科技园'
          }
      },
      methods: {
          showName(){
              console.log("组件实例对象：",this)
          }
      },
  }

完善的写法应该带上组件名称name，如下

  export default {
      name: 'School', //建议跟文件名称一致
      data(){
          return {
              schoolName: '天津安锐捷大学',
              schoolAddress: '普天科技园'
          }
      },
      methods: {
          showName(){
              console.log("组件实例对象：",this)
          }
      },
  }

此时此刻一个完整的单文件组件就写完了，

2.3. 单文件组件：学生组件

完善了单文件组件，我们趁热打铁

       <template>
           <div class="demo">
               <h2>学生名称：{{studentName}}</h2>
               <h2>学生年龄：{{studentAge}}</h2>
           </div>
       </template>

       <script>
       export default {
           name: 'Student', //建议跟文件名一致
           data(){
               return {
                   studentName: '安锐捷',
                   studentAge: '3'
               }
           }
       }
       </script>

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

3. App.vue （组件中的王者）

定义一个管理所有组件的组件 App.vue 同时把学生、学校组件注入管理起来

       <template>
           <div>
               <School></School>
               <Student></Student>
           </div>
       </template>
       <script>
       // App.vue主要作用：汇总所有组件

       //引入组件
       import School  from './School.vue'
       import Student from './Student.vue'

       export default {
           name: 'App',
           //注册组件
           components: {
               School,
               Student
           }
       }
       </script>

4. main.js （入口文件）

一般情况，所有的组件都得听从一个实例对象vm 的分配，所以需要一个vm,在这里如何创建一个vm实例呢

我们创建一个main.js,只有App.vue才有资格与 main.js 对话；

在  //引入组件
    import App from './App.vue'

    //创建Vue实例 vm
    new Vue({
        el:'#root',
        comments:{App}
    })

上面实例创建好了，我们需要放到容器里面 #root 容器在哪里呢？？引出我们后面要内容 index.html

5. index.html （入口页面）

标准化开发中，我们需要创建一个index.html 这个就是App 的容器

<!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    </head>
    <!--注意提前引用，可能会导致main.js 去拿结构，但是结构还没有，所以这块需要放到后面引用-->
    <!-- <script type="text/javascript" src="./main.js"></script> -->
    <body>
        <div id="root">
            <h1>你好,{{name}}</h1>
            <hr/>
              <!--引入组件，如果此处不想写，可以直接写到template中-->
              <App></App>
        </div>
        <!--main.js 中用到了 new Vue 所以先引入 new Vue-->
        <script type="text/javascript" src="../js/vue.js"></script>
        <!--先让模板出来，在引用-->
        <script type="text/javascript" src="./main.js"></script>
    </body>
    </html>