2、Vue组件化理解

幸运的lucia

已于 2023-06-07 23:01:41 修改

阅读量64

点赞数

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

于 2023-06-07 23:00:46 首次发布

本文链接：https://blog.csdn.net/weixin_43899065/article/details/131097770

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章详细介绍了Vue中的组件理解，包括模块、组件的概念及其作用，非单文件组件的创建、注册和使用步骤，组件的嵌套，VueComponent构造函数的应用，Vue实例和组件实例的区别，以及单文件组件的特点和优势，强调了组件化在提高代码复用和运行效率方面的重要性。

摘要由CSDN通过智能技术生成

一、理解

1、模块

理解：向外提供特定功能的js程序，一般就是一个js文件
为什么：js文件很多很复杂
作用：复用js，简化js的编写，提高js的运行效率

2、组件

理解：实现应用中局部功能代码（css/html/js）和资源（mp3/mp4/…）的集合
为什么：一个界面的功能很复杂
作用：复用编码，简化项目编码，提高运行效率

3、模块化

当应用中的js都以模块来编写，那么这个应用就是一个模块化的应用

4、组件化

当应用中的功能都以组件的方式来编写，那么这个应用就是一个组件化的应用

二、非单文件组件

一个文件中包含有N个组件

步骤： 创建组件 --> 注册组件 --> 使用组件

<html>
    ......
    <body>
        <div id="root">
            <h1>{{msg}}</h1>
            <school></school>    
            <hr>
            <student></student>
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
            // 创建学校组件
            const school = Vue.extend({
                // 组件定义时。一定不要写el配置，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器
                template: `
                    <div>
                        <h1>学校名称：{{name}}</h1>
                        <h1>学校地址：{{address}}</h1>
                    </div>
                `,
                // data一定要写从函数式，因对象式保存的是地址，更改会导致所有引入该组件的地方都改变
                data() {
                    return {
                        name: '测试学校',
                        address: '上海'
                    }     
                }
            })
            // 创建学生组件
            const student = Vue.extend({
                template: `
                    <div>
                        <h1>学生名称：{{name}}</h1>
                        <h1>学生年龄：{{age}}</h1>
                    </div>
                `,
                data() {
                    return{
                        name: 'cyr',
                        age: 18
                    }    
                }
            })
            // 创建hello组件
            const student = Vue.extend({
                template: `
                    <div>
                        <h1>{{msg}}</h1>
                    </div>
                `,
                data() {
                    return{
                        msg: 'hello'
                    }    
                }
            })
            // 注册全局组件：hello组件
            Vue.component('hello', hello)
            // 创建Vue实例，并注册组件
            new Vue({
                el: '#root',
                // 注册组件(局部注册)
                components: {
                    school: school,
                    student: student
                },
                data: {
                    msg: 'hello'
                }
            })
        </script>
    </body>
</html>

Vue使用组件的三大步骤：定义组件（创建组件）、注册组件、使用组件（写组件标签）
定义组件：使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但区别如下：
1. el不要写------最终所有的组件都要经过一个vm的管理，由vm的el来决定服务哪个容器
2. data必须写成函数-------避免组件被复用时，数据存在引用关系
备注：使用template可用配置组件结构
注册组件：
1. 局部注册：靠new Vue的时候传入components选项
2. 全局注册：靠Vue.componet(‘组件名’, 组件)
编写组件标签：<school></school>

注意点：

关于组件名：
- 一个单词组成
  1. 首字母小写：school
  2. 首字母大写：School
- 多个单词组成
  1. kebab-case命名：my-school
  2. CamelCase命名：MySchool（需要VUE脚手架支持）
- 备注：
  1. 组件名尽可能回避HTML中已有的元素名称
  2. 可以使用name配置项指定组件再=在开发者工具中呈现的名字
关于组件标签：
- 一种写法：
- 一种写法：
- 备注：不用使用脚手架时，会导致后续组件不能渲染
一个简写的方式：

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

三、组件的嵌套

<html>
    ......
    <body>
        <div id="root">
            <school></school>    
        </div>
        <script type="text/javascript">
            Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示
            // 创建学生组件
            const student = Vue.extend({
                template: `
                    <div>
                        <h1>学生名称：{{name}}</h1>
                        <h1>学生年龄：{{age}}</h1>
                    </div>
                `,
                data() {
                    return{
                        name: 'cyr',
                        age: 18
                    }    
                }
            })
            // 创建学校组件
            const school = Vue.extend({
                template: `
                    <div>
                        <h1>学校名称：{{name}}</h1>
                        <h1>学校地址：{{address}}</h1>
                        <hr>
                        <student></student>
                    </div>
                `,
                // 局部注册组件
                components: {
                    student: student
                },
                data() {
                    return {
                        name: '测试学校',
                        address: '上海'
                    }     
                }
            })
            // 创建Vue实例，并注册组件
            new Vue({
                el: '#root',
                // 注册组件(局部注册)
                components: {
                    school: school
                }
            })
        </script>
    </body>
</html>

四、VueComponent构造函数

school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的
我们只需写或，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)
特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
关于this指向：
1. 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this指向都是【VueComponent实例对象】
2. new Vue()配置中：data函数、methods中的函数、watch中的函数、computed中的函数，它们的this指向都是【Vue实例对象】
VueComponent的实例对象，以后简称vc（也可以称之为：组件实例对象）
Vue的实例对象，以后简称vm

五、Vue实例和组件实例

一个重要的内置关系：VueComponet.prototype.__proto__ === Vue.prototype
为什么要有这个关系呢？让组件的实例对象（vc）可以访问到Vue原型上的属性、方法

六、单文件组件

一个文件中只有1个组件

非但文件组件的一个弊端：样式不能跟组件走

<template>
    <!-- 组件的结构 -->
    <div class="demo">
        <h1>学校名称：{{name}}</h1>
        <h1>学校地址：{{address}}</h1>
        <button @click="showName">点我提示学校名称</button>
    </div>
</template>

<script>
    // 组件交互的相关代码（数据、方法等等）
    // Vue.extend可以省略
    export detault {
    // const school = Vue.extend({
        name: 'School',
        data () {
            return {
                name: '测试学校',
                address: '上海'
            }
        },
        methods: {
            showName() {
                alert(this.name)
            }
        }
    }
    // export detault school
</script>

<style>
    /* 组件的样式 */
    .demo {
        background-color: orange;
    }
</style>