第15集丨Vue中的组件基础概念

已于 2023-08-18 22:35:28 修改
阅读量140 收藏
点赞数
分类专栏： Vue2江湖 文章标签： vue.js javascript ecmascript
于 2023-08-16 23:08:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/DUQGQG/article/details/132258535
版权

目录

一、为什么需要组件

组件(Component)：用来实现局部(特定)功能效果的代码和资源的集合。

  • 代码：html/css/js
  • 资源：mp3/mp4/tff/zip...

1.1 传统方式编写应用

传统方式编写应用存在的问题：

  • 依赖关系混乱，引入的先后顺序，不好维护
  • 代码复用率不高。
    在这里插入图片描述

1.2 使用组件方式编写应用

使用组件方式编写应用，可以很好解决传统方式编写应用存在的问题。

在这里插入图片描述

1.3 Vue的组件管理

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。在这里插入图片描述

二、Vue中的组件

组件是可复用的 Vue 实例，因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

1.1 基本概念

1.1.1 组件分类

Vue中组件分为：非单文件组件、单文件组件

  • 非单文件组件：一个文件中包含有n个组件。a.html
  • 单文件组件：一个文件中只包含有1个组件。a.vue

1.1.2 Vue中使用组件的三大步骤:

  1. 定义组件(创建组件)
  2. 注册组件
  3. 使用组件(写组件标签)

1.1.3 如何定义一个组件

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

  • el不要写，为什么?—最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
  • data必须写成函数,为什么?——避兔组件被复用时,数据存在引用关系(因为如果直接写一个对象，组件复用的时候共用一个对象，容易引起问题)。

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

1.1.4 如何注册组件

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

1.1.5 如何使用组件

编写组件标签，例如：<school></school>

1.2 注意点

1.2.1 关于组件名

一个单词组成：

  • 第一种写法(首字母小写)：school
  • 第二种写法(首字母大写)：School

多个单词组成:

  • 第一种写法(kebab-case命名)：my-school
  • 第二种写法(CamelCase大驼峰命名)：MySchool（需要Vue脚手架支持)

备注:

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

推荐使用的命令：School和MySchool

1.2.2 关于组件标签

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

备注：不用使用脚手架时，写第一个<school/>渲染不会有问题，写超过一个<school/>的时候，会导致后续的<school/>组件不能渲染。

1.2.3 一个简写方式

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

简写的形式，其底层还是会自动调用Vue.extend()函数 。

三、非单文件组件

下面案例中，定义了三个组件：hello、school、student ，其中hello为全局组件，而school、student为局部组件。

在定义组件的时候注意点：

  • 不能使用el 配置项
  • data必须使用函数式，不能使用对象式
<div id="root">
    <h2>{{msg}}</h2>
    <!-- 编写组件标签 -->
    <school></school>
    <hr>
    <student></student>
    <student></student>
    
</div>
<div id="root2">
    <hello></hello>
</div>
<script>
    // 创建全局hello组件
    const hello = Vue.extend({
        template:`
            <div>
                <h2>我是全局{{name}}组件！</h2>
            </div>
        `,
        data() {
            return {
                name:'Hello'
            }
        },
    })
    // 全局注册组件
    Vue.component('hello',hello)
    
    // 创建School组件
    const school = Vue.extend({
        // el:'root', //不能写el配置项
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2> 
                <button @click="showName">点我显示学校名</button>
            </div>
        `,
        data() {
            return {
                schoolName: '南京大学',
                address: '江苏省南京市鼓楼区汉口路22号',
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        },
    })
    // 创建Student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data() {
            return {
                studentName: '令狐冲',
                age: 20
            }
        },
    })

    new Vue({
        data:{
            msg:'非单文件组件使用'
        },
        el: '#root',
        components: {
            school, //相当于school: school
            student
        }


    })
    
    new Vue({
        el:'#root2'
    })
</script>

在这里插入图片描述

四、组件的嵌套

4.1 案例一

<div id="root">
    <!-- 编写组件标签 -->
    <school></school>
    <hello></hello>
</div>

<script>

    // 创建Student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data() {
            return {
                studentName: '令狐冲',
                age: 20
            }
        },
    })

    // 创建School组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2> 
                <student></student>
            </div>
        `,
        data() {
            return {
                schoolName: '南京大学',
                address: '江苏省南京市鼓楼区汉口路22号',
            }
        },
        components:{
            student
        }
    })
    
    // 创建hello组件
    const hello = Vue.extend({
        template:`
            <div>
                <h2>我是{{name}}组件！</h2>
            </div>
        `,
        data() {
            return {
                name:'hello'
            }
        },
    })

    // 创建vm
    new Vue({
        el: '#root',
        // 局部注册组件
        components: {
            school, 
            hello
        }


    })
    
</script>

在这里插入图片描述

4.2 案例二

<div id="root">
    <!-- <app></app> -->
</div>

<script>

    // 创建Student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data() {
            return {
                studentName: '令狐冲',
                age: 20
            }
        },
    })

    // 创建School组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2> 
                <student></student>
            </div>
        `,
        data() {
            return {
                schoolName: '南京大学',
                address: '江苏省南京市鼓楼区汉口路22号',
            }
        },
        components:{
            student
        }
    })
    
    // 创建hello组件
    const hello = Vue.extend({
        template:`
            <div>
                <h2>我是{{name}}组件！</h2>
            </div>
        `,
        data() {
            return {
                name:'hello'
            }
        },
    })

    // 创建app组件
    const app = Vue.extend({
        template:`
            <div>
                <school></school>
                <hello></hello>
            </div>
        `,
        components:{
            school,
            hello
        }
    })

    // 创建vm
    new Vue({
        template:`<app></app>`,
        el: '#root',
        // 局部注册组件
        components: {
            app
        }


    })
    
</script>

在这里插入图片描述

五、VueComponent()构造函数

5.1 案例分析

下面案例中打印了school 组件。

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

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

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

  4. 关于this指向:

    • 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】
    • new Vue()配置中:data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。

  5. VueComponent的实例对象，以后简称vc（也可称之为:组件实例对象)
    vue的实例对象,以后简称vm。

// 创建School组件
const school = Vue.extend({
   template:`
       <div>
           <h2>学校名称：{{schoolName}}</h2>
           <h2>学校地址：{{address}}</h2> 
       </div>
   `,
   data() {
       return {
           schoolName: '南京大学',
           address: '江苏省南京市鼓楼区汉口路22号',
       }
   },
})
console.log(school)

在这里插入图片描述

5.2 为什么每次调用Vue.extend，返回的是一个全新的VueComponent？

打开源码，查看Vue.extend()函数定义，可以发现其最终返回的sub ,由此可见每次调用返回的都是一个全新的VueComponent() 函数

在这里插入图片描述

5.3 vm管理vc

打开控制台，输出vm，可以发现在vc存储在$children属性上。

在这里插入图片描述

5.4 vm和vc

vm和vc不一样.

  • 创建vc的时候，不能写el，vm可以
  • vc的data必须写成函数式，vm可以是对象式

六、一个重要的内置关系

6.1 显示/隐式原型属性、原型对象

显示原型属性、隐式原型属性指向同一个对象：原型对象

function Person(name) {
    this.name = name
}
const person = new Person('张三');

// 显示原型属性
console.log(Person.prototype);

// 隐式原型属性
console.log(person.__proto__);

// 显示原型属性、隐式原型属性指向同一个对象：原型对象
console.log(Person.prototype === person.__proto__); //true

Person.prototype.age = 25;
console.log(person.age); //25

6.2 内置关系

一个重要的内置关系：VueComponent.prototype._proto_=== Vue.prototype

为什么要有这个关系？是为了让组件实例对象（vc）可以访问到Vue原型上的属性、方法。

下面案例中，证明了这个重要的内置关系。即：school.prototype.__proto__ == Vue.prototype

<div id="root">
    <!-- 编写组件标签 -->
    <school></school>
</div>

<script>
    // 创建School组件
    const school = Vue.extend({
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2> 
            </div>
        `,
        data() {
            return {
                schoolName: '南京大学',
                address: '江苏省南京市鼓楼区汉口路22号',
            }
        },
    })
    // true
    console.log(school.prototype.__proto__  == Vue.prototype)
    // 创建vm
    new Vue({
        el: '#root',
        // 局部注册组件
        components: {
            school, 
        }


    })
    
</script>

6.3 关系分析图

Vue和VueComponent的关系分析图如下：

在这里插入图片描述

七、单文件组件

7.1 安装Vetur插件

在VSCode中安装Vetur插件.

在这里插入图片描述

安装完成后，输入<v 回车就会自动生成相关代码
在这里插入图片描述

7.2 案例

下面案例最终的目录结构如下：

在这里插入图片描述

7.2.1 School.vue

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

<script>
export default {
    name: 'School',
    data() {
        return {
            schoolName: "南京大学",
            address: "江苏省南京市鼓楼区汉口路22号",
        };
    },
    methods: {
        showName() {
            alert(this.schoolName);
        },
    },
};
</script>

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

7.2.2 Student.vue

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

<script>
export default {
    name: 'Student',
    data() {
        return {
            name: "令狐冲",
            age: 20,
        };
    }
 
};
</script>

7.2.3 App.vue

<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>

7.2.4 main.js

import App from './App'

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

7.2.5 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root">
        <!-- <App></App> -->
    </div>
    <script src="../../lib/vue.js"></script>
    <script src="./main.js"></script>
</body>
</html>
秋堂主
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 父组件中调用子组件函数的方法
10-16
主要介绍了vue 父组件中调用子组件函数的方法，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
如何组织和管理复杂的Vue组件结构？
2301_77795034的博客
06-12 949
我们还可以按照组件的不同状态，将组件划分为不同的类型。除了使用插件来组织和管理组件外，我们还可以使用 Vue 组件库来统一管理组件。组件库可以帮助我们将组件按照不同的主题、风格和功能进行分类，并提供相应的文档和示例，方便我们在项目中重复使用。同时，组件库也可以帮助我们统一管理组件的样式和脚本，提高组件的可维护性和可复用性。同时，插件也帮助我们统一管理组件的样式和脚本，提高了组件的可维护性和可复用性。同时，插件也可以帮助我们统一管理组件的样式和脚本，提高组件的可维护性和可复用性。
35-vue中vuex(实现组件的集中管理)的介绍和使用
code^_^熊的博客
03-01 236
一.vuex的介绍 vuex是什么？   (精简)对vue中多个组件的共享状态进行集中式管理 vuex的作用(优点)？   vuex可以优化解决的问题：     ①将数据及其操作数据的行为都定义在父组件里面     ②还需要将数据及其数据操作的行为传递给各个子组件当中(有可能需要多级传递) 起到了优化代码的作用。 vuex的单向数据流(图解)   二.vuex的使用相关 &nb
Vue相关开源项目库汇总(史上最全)
腾讯全栈-ITCJF
10-13 3万+
目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★
VUE组件化应用管理构建
hhhh
09-05 341
vue.compoent（）
vue后台管理系统富文本组件（一）tinymce
前端开发者
08-23 2万+
vue后台管理系统富文本组件tinymce 简介 富文本组件作为后台管理系统的最重要的基础组件之一，一定要选择坑比较少的富文本厂家。这里使用的是好看又坑少的tinymce。 主要依赖说明 （先安装，步骤略） { "element-ui": "2.11.1", "vue": "^2.6.10", "vue-router": "^3.0.1" } tinymc...
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
10-15
主要介绍了vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue父组件如何获取子组件中的变量
10-16
主要为大家详细介绍了Vue父组件如何获取子组件中的变量，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue中组件的3种使用方式详解
12-01
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。 在vue angular react三大前端框架的大前端时代。许多人选择了vue，在 github 上的star，vue已经超过react的数量了。虽然star并不能代表vue...
详解Vue中组件的缓存
10-17
主要介绍了Vue中组件的缓存，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
【vue】vue统一管理全局组件
Meditation_Crazy
11-04 478
前言 转载：https://www.cnblogs.com/zjw2004112/p/11518767.html 代码示例 装载全局组件 import Vue from 'vue' // 装载全局组件 export default function(vue) { if (this.installed) { return } Vue.component( 'public-remote-select-unit', import('@/components/publ.
vue中自定义组件（插件）
luckylqh的博客
01-04 1万+
在vue项目中，可以自定义组件像vue-resource一样使用Vue.use（）方法来使用，具体实现方法：1、首先建一个自定义组件的文件夹，比如叫loading，里面有一个index.js，还有一个自定义组件loading.vue,在这个loading.vue里面就是这个组件的具体的内容，比如：<template> <div> loading..............
vue 入门1 组件管理
weixin_30670925的博客
06-23 85
全局 组件、局部组件 // Vue.component('todo-list',{ // template:'<li >item</li>' // }); //全局 // var todoitem={ // template:'<li >item</li>' // } //局...
Vue (2) 组件基础(全局组件和局部组件)
不负年华
06-06 3660
组件是什么 ？ 组件是Vue最强大的功能之一，组件可扩展 HTML ，封装可重用的模块，让其它地方能使用。 组件能干嘛 ? 组件的优点是封装重复的特定 html 代码（css,js,html），然后通过组件名字可以重复利用该组件中的代码。 组件的分类 组件可分成全局组件和局部组件，它们的区别就是：全局组件能供所以实例使用，局部组件只能给当前实例使用。所以它们的区别就是作用域不同。 全局组件实例： 所有挂载了vue 对象的 html中 都 可以使用。 语法规则： 全局组件: Component:组件;
Vue封装组件的过程
热门推荐
感恩、奋进、自信
03-20 14万+
vue组件的定义 ● 组件(Component)是Vue.js最强大的功能之一 ● 组件可以扩展HTML元素，封装可重用代码 ● 在较高层面上，组件是自定义元素，Vue.js的编译器为他添加特殊功能 ● 有些情况下，组件也可以表现用 is 特性进行了扩展的原生的HTML元素 ● 所有的Vue组件同时也都是Vue实例，所以可以接受相同的选项对象（除了一些根级特有的选项），并提供相同的生命周...
vue实战之vue后台管理系统（三）之公共样式组件
mirror_Mx的博客
01-10 3206
经过login页面跳转，跳转成功后，跳转到table页面。 Home.vue组件 这个组件的用户登录成功后所有页面(除404页面外），所有页面的公共部分组件 layui布局 官网布局： http://element-cn.eleme.io/#/zh-CN/component/layout 此页面的代码布局结构： 图片和昵称的加载 &amp;amp;lt;span class=&amp;quot;el-dropdown-lin...
vuex组件管理方式
weixin_30693183的博客
03-15 166
1.使用同一数据源(store)的组件放在一个目录中 2.根组件(index.vue)中引用store，子组件不引用 export default { name:'Counter1', methods:{ localMethod() { }, //updateCount(value) { this.$store.commit('UPDATE_COUNT'...
Vue组件化开发
troysps的博客
05-19 2535
Vue js组件化开发 Vue js 对象简写 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-
Vue2.0+组件库总结
彦清专栏
12-28 4165
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式
vue中组件复用的区分
最新发布
09-13
在Vue中，组件复用可以通过以下几种方式进行区分： 1. 在组件定义时使用不同的组件名：每个Vue组件都有一个唯一的名称，通过在组件定义时使用不同的组件名可以实现组件的区分。这样每个组件都是独立的，不会被重用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值