Vue (六) --------- 组件化编程

在森林中麋了鹿

已于 2022-06-05 22:05:05 修改

阅读量951

点赞数

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

于 2022-06-05 21:54:44 首次发布

本文链接：https://blog.csdn.net/m0_51111980/article/details/125134994

版权

Vue 专栏收录该内容

17 篇文章 4 订阅

订阅专栏

一、模块和组件

模块就是向外提供特定功能的 js 程序, 一般就是一个 js 文件。模块编写的作用为复用 js、简化 js 的编写、提高 js 运行效率。

组件用来实现局部(特定)功能效果的代码集合 (html/css/js/image…) ，可以起到复用编码、简化项目编码、提高运行效率的作用。

组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可。

二、模块化和组件化

模块化：是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。

组件化：是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用；当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

三、非单文件组件

非单文件组件就是一个文件中有多个组件，实际上就是 html 文件。

特点：

模板编写没有提示
没有构建过程，无法将 ES6 转换成 ES5
不支持组件的 CSS
真正开发中几乎不用

使用步骤：

1、定义组件(创建组件)

使用 Vue.extend(options) 创建，其中 options 和 new Vue(options) 时传入的那个options 几乎一样，但也有点区别。

区别如下：

el 不要写，因为最终所有的组件都要经过一个 vm 的管理，由 vm 中的 el 决定服务哪个容器。
data 必须写成函数，避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

2、注册组件

局部注册：靠 new Vue 的时候传入 components 选项
全局注册：靠 Vue.component('组件名',组件)

3、使用组件(写组件标签)

<school></school>

<!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">
    <script src="./lib/vue-2.4.0.js"></script>
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <div id="app">
        <!-- 编写组件标签 -->
       <school></school>
       <student></student>
    </div>

    <script>
        Vue.config.productionTip = false; 
         
        // 编写组件
        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称 : {{schoolName}}</h2>
                    <h2>学校地址 : {{address}} </h2>
                    <button @click="showName">点我提示学校名</button>   
                </div>
            `,
            data() {
                return {
                    schoolName:'qdu',
                    address:'qingdao'
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName)
                }
            }
        })
        
        const student = Vue.extend({
            template:`
                <div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>  
            `,
            data() {
                return {
                    studentName:'小伟',
                    age:18
                }
            }
        });
        // 全局注册组件
        Vue.component('school', school);
        Vue.component('student', student);

        var vm = new Vue({
            el:'#app',
            // 局部注册组件
            components:{
                school,
                student
            }
        })

    </script>
</body>
</html>

在这里插入图片描述

注意

关于组件名:

一个单词组成
第一种写法(首字母小写)：school
第二种写法(首字母大写)：School
多个单词组成：
第一种写法(kebab-case命名)：my-school
第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：

(1) 组件名尽可能回避 HTML 中已有的元素名称，例如：h2、H2 都不行。
(2) 可以使用 name 配置项指定组件在开发者工具中呈现的名字。

关于组件标签:

第一种写法：school></school>
第二种写法：<school/>

备注：不用使用脚手架时，会导致后续组件不能渲染。

一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

组件的嵌套

<!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">
    <script src="./lib/vue-2.4.0.js"></script>
    <title>Document</title>
    <style>

    </style>
</head>
<body>
    <div id="app">
       <app></app>
    </div>

    <script>
        Vue.config.productionTip = false; 
         
        const student = Vue.extend({
            template:`
                <div>
					<h2>学生姓名：{{studentName}}</h2>
					<h2>学生年龄：{{age}}</h2>
				</div>  
            `,
            data() {
                return {
                    studentName:'小伟',
                    age:18
                }
            }
        });

        const school = Vue.extend({
            template:`
                <div>
                    <h2>学校名称 : {{schoolName}}</h2>
                    <h2>学校地址 : {{address}} </h2>
                    <student></student> 
                </div>
            `,
            data() {
                return {
                    schoolName:'qdu',
                    address:'qingdao'
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName)
                }
            },

            components:{
                student
            }
        })
        
        const app = Vue.extend({
            template:`
                <div>
                    <school></school>
                    <student></student>
                </div> 
            `,
            components:{
                school
            }
        })
        
        var vm = new Vue({
            el:'#app',
            // 局部注册组件
            components:{
               app
            }
        })

    </script>
</body>
</html>

在这里插入图片描述

VueComponent

school 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的。

我们只需要写<school/>或<school></school>，Vue 解析时会帮我们创建 school 组件的实例对象，即 Vue 帮我们执行 new VueComponent(options)。

注意：每次调用Vue.extend，返回的都是一个全新 VueComponent

关于 this 指向

(1) 组件配置中：

data 函数、methods 中的函数、watch 中的函数、computed 中的函数，它们的this均是 VueComponent 实例对象。

(2) new Vue(options) 配置中：

data 函数、methods 中的函数、watch 中的函数、computed 中的函数它们的this 均是 Vue 实例对象。

VueComponent 的实例对象，以后简称 vc (也可称之为：组件实例对象)。
Vue 的实例对象，以后简称 vm。

注：

VueComponent.prototype.proto === Vue.prototype 这个内置关系让组件实例对象(vc)可以访问到 Vue 原型上的属性、方法。

四、单文件组件

单文件组件就是一个文件扩展名为 .vue 的 single-file components (单文件组件)的文件。是 Vue.js 自定义的一种文件格式，一个 .vue 文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css、js 并且还可以使用 webpack 或 Browserify 等构建工具。

优点：

在 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

全局定义(Global definitions) 强制要求每个 component 中的命名不得重复
字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的\
不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。

一个 .vue文件的组成


1. 模板页面

<template> 页面模板 </template>

2. JS 模块对象
<script>
	export default {
		data() {return {}},
		methods: {},
		computed: {},
		components: {}
   }
</script>

<!--export主要用于对外输出本模块变量的接口，一个文件就可以被理解为一个模块。export就是导出。-->


3. 样式
<style>
	样式定义
</style>

基本使用

1.引入组件

Student.vue

<template>
   <div>
      <h2>学生姓名： {{name}}</h2>
      <h2>学生年龄： {{age}}</h2>
   </div>
</template>


<script>
    export default {
        name:'qduStu',
        age:18
    }

</script>

School.vue

<template>
    <div class="demo">
        <h2>学校姓名: {{name}}</h2>
        <h2>学校地址: {{address}}</h2>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                name:'qdu',
                address:'qingdao'
            }
        }
    }
   
</script>


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

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


<script>
    import School from './School'
    import Student from './Student'

    export default {
        name:'app',
        components:{
            School,
            Student
        }
    }
</script>

2.映射成标签

main.js

import app from './App.vue'

new Vue({
	el:'#app',
	components:{app},
})

3.使用组件标签

.html

<!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>Document</title>
    
    
</head>
<body>
    <div id="app">
        <app></app>
    </div>
    <script src="./lib/vue-2.4.0.js"></script>
    <script src="./App.vue"></script>
</body>
</html>