Vue 学习笔记05：Vue组件化编程

iFulling

已于 2022-03-27 12:36:33 修改

阅读量1.1k

点赞数 2

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

于 2022-03-27 11:51:21 首次发布

本文链接：https://blog.csdn.net/realoser/article/details/123744551

版权

前端专栏收录该内容

35 篇文章 5 订阅

订阅专栏

Vue 学习笔记05：Vue组件化编程

一、模块与组件概念
二、非单文件组件
三、单文件组件

一、模块与组件概念

模块

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

组件

理解：用来实现局部（特定）功能效果的代码集合（html、css、js、images…）
作用：复用编码，简化项目编码，提高运行效率

模块化

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

组件化

理解：当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

二、非单文件组件

1. 基本使用

Vue 中使用组件的三大步骤：
（1）定义组件（创建组件）
（2）注册组件
（3）使用组件（写组件标签）
如何定义一个组件？
（1）使用 Vue.extend(options) 创建，其中 options 和 new Vue(options) 时传入的那个 options 几乎一样，但也有区别。
（2）区别：组件不能写 el，data 必须写成函数形式。
（3）备注：使用 template 可以配置组件结构。
如何注册组件？
（1）局部注册：靠 new Vue 的时候传入 components 选项

（2）全局注册：靠 Vue.component(‘组件名’, 组件)
编写组件标签

2. 注意点

关于组件名：
（1）一个单词组成：
          第一种写法（首字母小写）：school
          第二种写法（首字母大写）：School
（2）多个单词组成：
          第一种写法（kebab-case 命名）：my-school
          第二种写法（CamelCase 命名）：MySchool（需要 Vue 脚手架支持）
（3）备注：
          组件名尽可能回避 HTML 中已有的元素名称，例如：h2、H2 都不行。
          可以使用 name 配置项指定组件在开发者工具中呈现的名字。
关于组件标签
（1）第一种写法：<school></school>
（2）第二种写法：<school/>，在不使用脚手架时，会导致后续组件不能渲染。
一个简写方式：
const school = Vue.extend(options) 可简写为：const school = options

3. 组件嵌套

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<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>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
    </div>
</body>
<script>
    Vue.config.productionTip = false;

    const student = {
        template: `
            <div>
                <h2>学生姓名：{{sname}}</h2>    
            </div>
        `,
        data() {
            return {
                sname: '张三'
            }
        },
    }

    const School = {
        template: `
            <div>
                <h2>学校名称：{{sname}}</h2>    
                <student></student>
            </div>
        `,
        data() {
            return {
                sname: '尚硅谷'
            }
        },
        components: {
            student
        }
    }

    const hello = {
        template: `
            <div>
                <h2>{{msg}}</h2>    
            </div>
        `,
        data() {
            return {
                msg: 'Hello, World!'
            }
        },
    }

    const app = {
        template: `
            <div>
                <hello></hello>
                <School></School>
            </div>
        `,
        components: {
            School,
            hello
        }
    }

    const vm = new Vue({
        el: "#root",
        template: `<app></app>`,
        components: {
            app
        }
    })
</script>

</html>

4. VueComponent 构造函数

Vue 组件本质是一个名为 VueComponent 的构造函数，且不是程序员定义的，是 Vue.extend 生成的。
我们只需要写【组件标签】，Vue 解析时会帮我们创建该组件的实例对象。
每次调用 Vue.extend 创建组件时，返回的都是一个全新的 VueComponent。
关于 this 的指向：
（1）组件配置中：data 函数、methods 中的函数、watch 中的函数、computed 中的函数，他们的 this 均是【VueComponent 实例对象】
（2）new Vue(options) 配置中：data 函数、methods 中的函数、watch 中的函数、computed 中的函数，他们的 this 均是【Vue 实例对象】
VueComponent 的实例对象，简称 vc，也可称之为：组件实例对象。

5. 一个重要的内置关系

隐式原型属性只有实例才有（__proto__），显式原型属性只有函数上才有（prototype）
实例的隐式原型属性永远指向自己缔造者（构造函数）的原型对象。换句话说：构造函数的显式原型属性 和 实例对象的隐式原型属性 都指向 同一个原型对象。
一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
有了这层关系，组件实例对象就可以访问到 Vue 原型上的属性、方法。

三、单文件组件

1. 创建 Vue 组件文件

在这里插入图片描述
在各自的组件文件中，template 里面写结构，script 里面写脚本，style 里面写样式。

2. 汇总所有组件

新建一个 App.vue 组件汇总（引入）所有组件。
在这里插入图片描述

3. 创建 Vue 实例

新建 main.js，创建 Vue 实例，并引入 App.vue
在这里插入图片描述

4. 创建首页文件

在这里插入图片描述
到此会报错，需要使用 Vue 脚手架才能显示页面。

转到 Vue 学习笔记06：Vue脚手架

iFulling

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue 学习笔记05：Vue组件化编程

Vue 学习笔记05：Vue组件化编程一、模块与组件概念一、模块与组件概念模块理解：向外提供特定功能的 js 程序，一般就是一个 js 文件作用：复用 js，简化 js 的编写，提高 js 运行效率组件理解：用来实现局部（特定）功能效果的代码集合（html、css、js、images…）作用：复用编码，简化项目编码，提高运行效率模块化理解：当应用中的 js 都以模块来编写的，那这个应用就是一个模块化的应用。组件化理解：当应用中的功能都是多组件的方式来编写的
复制链接

扫一扫