vue3(三)——组件

已于 2024-02-20 20:17:41 修改
阅读量727 收藏
点赞数
文章标签： 前端 javascript 开发语言
于 2023-07-19 22:00:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_60893085/article/details/131590630
版权

文章目录

Vue3组件化开发（一）

认识组件的嵌套
前面我们是将所有的逻辑放到一个App.vue中

  • 在之前的案例中，我们只是创建了一个组件App ;
  • 如果我们一个应用程序将所有的逻辑都放在一个组件中，那么这个组件就会变成非常的臃肿和难以维护;
  • 所以组件化的核心思想应该是对组件进行拆分，拆分成一个个小的组件;
  • 再将这些组件组合嵌套在一起，最终形成我们的应用程序
    我们来分析一下下面代码的嵌套逻辑，假如我们将所有的代码逻辑都放到一个App.vue组件中:

我们来分析一下下面代码的嵌套逻辑，假如我们将所有的代码逻辑都放到一个App.vue组件中:

  • 我们会发现，将所有的代码逻辑全部放到一个组件中，代码是非常的臃肿和难以维护的。
  • 并且在真实开发中，我们会有更多的内容和代码逻辑，对于扩展性和可维护性来说都是非常差的。
  • 所以，在真实的开发中，我们会对组件进行拆分，拆分成一个个功能的小组件。
    在这里插入图片描述

组件的拆分

我们可以按照如下的方式进行拆分
在这里插入图片描述
按照如上的拆分方式后，我们开发对应的逻辑只需要去对应的组件编写就可。

组件的通讯

上面嵌套逻辑如下，他们存在如下关系：

App组件是Header、Main、Footer组件的父组件;
Main组件是Banner、ProductList组件的父组件;

在开发过程中，我们经常遇到组件之间相互进行通信

  • 比如App可能使用了多个Header，每个地方的Header展示的内容不同，那么我们就需要使用者传递给Header一些数据，让其进行展示;
  • 又比如我们在Main中一次性请求了Banner数据和ProductList数据，那么就需要传递给它们来进行展示;
  • 也可能是子组件中发生了事件，需要由父组件来完成某些操作，那就需要子组件向父组件传递事件;

父子组件之间通信的方式

父子组件之间如何进行通信呢？

  • 父组件传递给子组件:通过props属性;
  • 子组件传递给父组件:通过$emit触发事件;

  • 在开发中很常见的就是父子组件之间通信，比如父组件有一些数据，需要子组件来进行展示:
    • 这个时候我们可以通过props来完成组件之间的通信;
  • 什么是Props呢?
    • Props是你可以在组件上注册一些自定义的attribute ;
    • 父组件给这些attribute赋值，子组件通过attribute的名称获取到对应的值;
  • Props有两种常见的用法：

    • 方式一∶字符串数组，数组中的字符串就是attribute的名称;
      在这里插入图片描述

    • 方式二∶对象类型，(对象里面放的是键值对)对象类型我们可以在指定attribute名称的同时，指定它需要传递的类型、是否是必须的、默认值等等;
      区别（大多数使用对象的写法）

  • 数组用法中我们只能说明传入的attribute的名称，并不能对其进行任何形式的限制，接下来我们来看一下对象的写法是如何让我们的props变得更加完善的。
  • 当使用对象语法的时候，我们可以对传入的内容限制更多∶
    • 比如指定传入的attribute的类型;
    • 比如指定传入的attribute是否是必传的;
    • 比如指定没有传入时，attribute的默认值;
      在这里插入图片描述
      细节一：那么type的类型都可以是哪些呢？
  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol
    细节二：对象类型的其他写法
    在这里插入图片描述
    在这里插入图片描述
    ** 细节三：Prop的大小写命名**
    Prop的大小写命名(camelCase vs kebab-case)
  • HTML中的attribute名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符;
  • 这意味着当你使用DOM中的模板时，camelCase (驼峰命名法)的prop名需要使用其等价的 kebab-case(短横线分隔命名)命名;
    在这里插入图片描述

非Prop的Attribute

什么是非Prop的Attribute呢?

  • 当我们传递给一个组件某个属性，但是该属性并没有定义对应的props或者emits时，就称之为非Prop的Attribute ;
  • 常见的包括class、style、id属性等;

Attribute继承
当组件有单个根节点时，非Prop的Attribute将自动添加到根节点的Attribute中:
在这里插入图片描述
禁用Attribute继承和多根节点

  • 如果我们不希望组件的根元素继承attribute，可以在组件中设置inheritAttrs: false :
  • 禁用attribute继承的常见情况是需要将attribute应用于根元素之外的其他元素;
  • 我们可以通过$attrs来访问所有的非props的attribute ;
    在这里插入图片描述

在这里插入图片描述

  • 多个根节点的attribute
    • 多个根节点的attribute如果没有显示的绑定，那么会报警告，我们必须手动的指定要绑定到哪一个属性上:
      在这里插入图片描述

子组件传递给父组件

什么情况下子组件需要传递内容到父组件呢?

  • 当子组件有一些事件发生的时候，比如在组件中发生了点击，父组件需要切换内容;
  • 子组件有一些内容想要传递给父组件的时候;
    我们如何完成上面的操作呢?
  • 首先，我们需要在子组件中定义好在某些情况下触发的事件名称;
  • 其次，在父组件中以v-on的方式传入要监听的事件名称，并且绑定到对应的方法中;
  • 最后，在子组件中发生某个事件的时候，根据事件名称触发对应的事件;\

自定义事件的流程

  • 我们封装一个CounterOperation.vue的组件∶
    • 内部其实是监听两个按钮的点击，点击之后通过this.$emit的方式发出去事件;
      在这里插入图片描述
      在这里插入图片描述

自定义事件的参数和验证

  • 自定义事件的时候，我们也可以传递一些参数给父组件：
    在这里插入图片描述
  • 在vue3当中，我们可以对传递的参数进行验证：
    在这里插入图片描述

非父子组件的通信

  • 在开发中，我们构建了组件树之后，除了父子组件之间的通信之外，还会有非父子组件之间的通信。
  • 这里我们主要讲两种方式:
    • Provide/Inject;
    • Mitt全局事件总线;

Provide和Inject

Provide/Inject用于非父子组件之间共享数据∶

  • 比如有一些深度嵌套的组件，子组件想要获取父组件的部分内容;
  • 在这种情况下，如果我们仍然将props沿着组件链逐级传递下去，就会非常的麻烦;
    在这里插入图片描述
    对于这种情况下，我们可以使用Provide和 Inject :
  • 无论层级结构有多深，父组件都可以作为其所有子组件的依赖提供者;
  • 父组件有一个provide选项来提供数据;
  • 子组件有一个inject选项来开始使用这些数据;
    实际上，你可以将依赖注入看作是“long range props”，除了∶
  • 父组件不需要知道哪些子组件使用它provide的 property
  • 子组件不需要知道inject的 property来自哪里

Provide和Inject基本使用

我们开发一个这样的结构
在这里插入图片描述
在这里插入图片描述
Provide和Inject函数的写法：
如果Provide中提供的一些数据是来自data，那么我们可能会想要通过this来获取∶
在这里插入图片描述
在这里插入图片描述

处理响应式数据

  • 我们先来验证一个结果∶如果我们修改了this.names的内容，那么使用length的子组件会不会是响应式的?

  • 我们会发现对应的子组件中是没有反应的:

    • 这是因为当我们修改了names之后，之前在provide中引入的this.names.length 本身并不是响应式的;

  • 那么怎么样可以让我们的数据变成响应式的呢?

    • 非常的简单，我们可以使用响应式的一些API来完成这些功能,比如说computed函数;
    • 当然，这个computed是vue3的新特性;
      注意∶我们在使用length的时候需要获取其中的value

  • 这是因为computed返回的是一个ref对象，需要取出其中的value来使用;
    在这里插入图片描述

全局事件总线mitt库

Vue3从实例中移除了 o n 、 on、 on、off和$once方法，所以我们如果希望继续使用全局事件总线，要通过第三方的库:

  • Vue3官方有推荐一些库，例如mitt或tiny-emitter ;
  • 这里我们主要讲解一下mitt库的使用;

首先我们需要安装这个库：

npm install mitt

其次，我们可以封装一个工具eventbus.js
在这里插入图片描述

使用事件总线工具

在项目中可以使用它们:

  • 我们在Home.vue中监听事件;
  • 我们在App.vue中触发事件;
    在这里插入图片描述
    在这里插入图片描述

Mitt的事件取消

在某些情况下我们可能希望取消掉之前注册的函数监听
在这里插入图片描述

认识插槽Slot

  • 前面我们会通过props传递给组件—些数据，让组件来进行展示;
  • 但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素;
  • 比如某种情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片;
  • 我们应该让使用者可以决定某一块区域到底存放什么内容和元素;

举个栗子∶假如我们定制一个通用的导航组件-NavBar

  • 这个组件分成三块区域:左边-中间-右边，每块区域的内容是不固定;
  • 左边区域可能显示一个菜单图标，也可能显示一个返回按钮，可能什么都不显示;
  • 中间区域可能显示一个搜索框，也可能是一个列表，也可能是一个标题，等等;
  • 右边可能是一个文字，也可能是一个图标，也可能什么都不显示;

这个时候我们就可以来定义插槽slot：

  • 插槽的使用过程其实是抽取共性、预留不同;
  • 我们会将共同的元素、内容依然在组件内进行封装;
  • 同时会将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素;

如何使用slot呢？

  • Vue中将<slot>元素作为承载分发内容的出口﹔
  • 在封装组件中，使用特殊的元素<slot>就可以为封装组件开启一个插槽;
  • 该插槽插入什么内容取决于父组件如何使用;

插槽的基本使用

  • 我们一个组件MySlotCpn.vue :该组件中有一个插槽，我们可以在插槽中放入需要显示的内容;
  • 我们在App.vue中使用它们:我们可以插入普通的内容、html元素、组件元素都可以是可以的;
    在这里插入图片描述
    插槽的默认内容
    有时候我们希望在使用插槽时，如果没有插入对应的内容，那么我们需要显示一个默认的内容:
  • 当然这个默认的内容只会在没有提供插入的内容时，才会显示;
    在这里插入图片描述
    多个插槽的效果
    我们先测试一个知识点︰如果一个组件中含有多个插槽，我们插入多个内容时是什么效果?
  • 我们会发现默认情况下每个插槽都会获取到我们插入的内容来显示;
    ![在这里插入图片描述](https://img-
    blog.csdnimg.cn/5f3d3ede182443e997dec6118843270e.png)

具名插槽的使用

  • 事实上，我们希望达到的效果是插槽对应的显示，这个时候我们就可以使用具名插槽︰
    • 具名插槽顾名思义就是给插槽起一个名字，<slot>元素有一个特殊的attribute : name ;
    • 一个不带name 的slot，会带有隐含的名字defaut ;
      在这里插入图片描述

动态插槽名

什么是动态插槽名呢？

  • 目前我们使用的插槽名称都是固定的;比如v-slot:left、v-slot:center等等;
  • 我们可以通过v-slot:[dynamicSlotName]方式动态绑定一个名称;
    在这里插入图片描述
    剧名插槽使用时候的缩写
    跟v-on和v-bind一样，v-slot也有缩写;即把参数之前的所有内容(v-slot:)替换为字符#;

渲染作用域

在Vue中有渲染作用域的概念:

  • 父级模板里的所有内容都是在父级作用域中编译的;
  • 子模板里的所有内容都是在子作用域中编译的;
    如何理解这句话呢?我们来看一个案例:
  • 在我们的案例中ChildCpn自然是可以访问自己作用域中的title内容的;
  • 但是在App中，是访问不了ChildCpn中的内容的，因为它们是跨作用域的访问
    在这里插入图片描述

认识作用域插槽

但是有时候我们希望插槽可以访问到子组件中的内容是非常重要的:

  • 当一个组件被用来渲染一个数组元素时，我们使用插槽，并且希望插槽中没有显示每项的内容;
  • 这个Vue给我们提供了作用域插槽 ;
我年薪百万
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue购物车——组件化.rar
05-01
Vue购物车——组件化 涉及 Vue组件的全局注册 和 Vue组件的局部注册，父组件向子组件传值，子组件向父组件传值，数据的单向绑定
vue3---组件基础(上)保姆级篇
qq_61950936的博客
08-15 9295
关于 vue3 基础学习，前面两篇博客讲了单页面应用程序、vite 的基本使用。这期就来一篇多一点的吧！这期主要内容有：组件化开发思想、vue 组件的构成、组件的基本使用、封装组件的案例。看完这些，砸门也就详细了解什么是组件了。废话不多说，直接上刺刀！！组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。ibootstrap - Bootstrap可视化布局系统所展示的效果，就契合了组件化开发的思想。.........
VUE3浅析---组件
qq_22610595的博客
06-12 3112
vue3中的各种组件。
Vue3——组件基础
最新发布
不蒸馒头曾口气的博客
04-20 528
Vue3 组件基础 组件的定义与使用，局部组件与全局组件，父组件与子组件，父组件传值给子组件，事件发射：子组件传值给父组件
Vue3-组件基础
fusheng_cn的博客
09-25 2888
vue3组件基础：单页面应用程序、vite的基本使用、组件化开发思想，vue组件的构成、组件的基本使用
Vue3中的组件：组件的定义、组件的属性和事件、组件的Slots和动态组件
网络技术联盟站
07-18 2301
Vue3中定义组件有两种方式：通过对象字面量或通过函数。'在上述代码中，我们定义了一个组件，它有一个template属性，值为一个HTML字符串。这个HTML字符串将作为组件的模板。下面是通过'})在上述代码中，我们使用函数定义了一个组件，该函数接收一个对象作为参数，该对象包含了组件的属性和方法。本文详细介绍了Vue3中的组件，包括组件的定义、组件的使用、组件的属性和事件、组件的Slots和动态组件以及生命周期钩子函数等方面的内容。
前端常用 Vue3 项目组件大全
Itmastergo的博客
08-28 1977
Vue.js 是一种流行的 JavaScript 前端框架，它简化了构建交互式的用户界面的过程。Vue3 是 Vue.js 的最新版本，引入了许多新的特性和改进。
「Vue3系列」Vue3 组件
日常笔记/总结/系列知识梳理
03-04 1100
Vue 3 的生态系统还包含了许多第三方库和组件，如UI库（如Vuetify、Element Plus、Quasar等）、工具库（如Vuex、Vue Router、axios等）和插件，这些都可以帮助开发者更高效地构建Vue应用程序。但是，Vue 3 官方提供了几个核心库和插件，这些库和插件是构建Vue应用程序时常用的，并且与Vue 3紧密集成。在 Vue 3 中，组件的创建和使用与 Vue 2 有一些不同，尤其是在组合式 API 的引入下。在这个例子中，我们使用了 Vue 3 的组合式 API (
Vue侧滑菜单组件——DrawerLayout
10-18
Vue.js的侧滑菜单组件，通常被称为DrawerLayout，是Web应用中常见的设计模式，尤其在移动设备上，用于实现类似Android原生抽屉式的导航功能。本文将深入讲解如何基于Vue.js实现一个简单的DrawerLayout组件，名为vue-...
自制vue小组件——日历式日期选择器
08-16
vue组件引入方式引入。 ;bottom: 0;left:0;"> 通过ref获取和设置选择日期 this.$refs.mydatepicker.getSelect();获取选中日期，没选中为‘’。 this.$refs.mydatepicker.setSelect(‘2019/8/16’,‘2019/8/19’);...
Vue之组件
知识应该共享，创造才应收费
02-26 1521
本文主要介绍了组件的概念和VUE3中定义和使用组件的方法。看完本文，读者应该能了解到全局组件和局部组件的定义和使用方法以及他们之间的区别。组件具有复用性，全局组件只要定义了，处处都可以使用，而且使用很简单，但是性能不高；局部组件定义后需要注册餐能使用，而且使用起来相对麻烦，但是性能比较高。
Vue3基础学习笔记（三）探索组件1
smellsummer的博客
07-06 21
/包了一层 template : ` <counter /> ` });data() {return {const//包了一层 template : ` <counter /> ` });data() {return {//包了一层 template : ` <counter /> ` });data() {return {createApp//包了一层 template : ` <counter /> ` });
Vue3 常用组件
XunLin233的博客
11-20 384
Vue2 的template 模板中必须要有一个根标签，而我们在Vue3 的模板中不需要使用根标签就能渲染，因为Vue3 在内部会将多个标签包含在一个Fragment 虚拟元素中。好处就在于可以减少标签的层级，减小内存占用。
Vue3中的组件学习使用
zhmen的博客
12-30 9660
Vue3组件的学习记录
Vue3 源码阅读（10）：组件化 —— 实现原理
f18855666661的博客
08-24 1818
组件是对页面中内容的一种模块化封装，这篇博客讲解 Vue 中组件化的实现方式。
vue3.0--组件模块系统
赵佳敏的博客
04-27 267
组件模块系统一、使用组件模块系统的步骤二、组件模块系统的同步加载三、组件模块系统的异步加载 一、使用组件模块系统的步骤 1.引入组件 2.把引入的所有组件全部暴露出去 3.按需引入文件 二、组件模块系统的同步加载 **common.js** import {defineAsyncComponent} from 'vue' let A=defineAsyncComponent(()=>import("../components/comA")); let B=defineAsyncC.
vue3——组件
xiaoququ的博客
08-11 1626
代码】vue3——组件。
Vue3-知识结构-组件
weixin_44082271的博客
12-22 189
组件：代表局部功能代码和资源的集合。
vue3 组件篇 Checkbox
秋来九月八
10-01 7516
实现的思路主要是依靠input type="checkbox",我们可以在这基础上修改样式，来实现新的组件ui，change事件和checked的逻辑，可以依靠input type="checkbox"自带的逻辑，这样可以省去很多代码。
Vue笔记（三）——组件&插槽
05-25
组件是 Vue.js 中最重要的概念之一。组件可以让我们将 UI 拆分为独立、可复用的部件，使得代码更加清晰、易于维护。在 Vue.js 中，组件可以分为全局组件和局部组件，其中全局组件可在任何地方使用，而局部组件只能在其父组件中使用。 定义组件时，需要使用 Vue.component() 方法，该方法需要传入两个参数：组件名称和组件配置对象。组件名称应该采用 kebab-case（短横线分隔命名）格式，以便在 HTML 中使用。 示例代码如下： ```javascript // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) ``` 在上述代码中，我们定义了一个名为 button-counter 的组件，该组件包含一个计数器，每次点击按钮计数器加一。 在 HTML 中使用组件时，需要使用组件名称作为自定义标签来调用组件。示例代码如下： ```html <div id="app"> <button-counter></button-counter> </div> ``` 在上述代码中，我们调用了 button-counter 组件，并将其渲染到了 id 为 app 的 div 元素中。 除了组件的 data 和 template 属性外，还可以使用 props 属性来传递组件之间的数据。使用 props 时，需要在组件的配置对象中定义 props 属性，并在 HTML 中使用 v-bind 指令来传递数据。 示例代码如下： ```javascript // 定义一个名为 todo-item 的新组件 Vue.component('todo-item', { props: ['todo'], template: '<li>{{ todo.text }}</li>' }) // 创建一个 Vue 实例 var app = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: '蔬菜' }, { id: 1, text: '水果' }, { id: 2, text: '奶酪' } ] } }) ``` 在上述代码中，我们定义了一个名为 todo-item 的组件，并使用 props 属性定义了一个名为 todo 的 prop。在 HTML 中，我们使用 v-bind 指令将 groceryList 数组中的每个对象传递给了 todo-item 组件。示例代码如下： ```html <div id="app"> <ul> <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item> </ul> </div> ``` 在上述代码中，我们使用 v-for 指令遍历 groceryList 数组，并使用 v-bind 指令将数组中的每个对象传递给了 todo-item 组件。注意，我们还需要使用 v-bind:key 指令来为每个列表项指定一个唯一的 key 值。 插槽是 Vue.js 中另一个重要的概念。插槽可以让父组件在子组件中插入任意的 HTML 内容，使得组件更加灵活、可复用。 在子组件中，使用 <slot> 标签来定义插槽。在父组件中，使用子组件的自定义标签来调用组件，并在标签内部插入 HTML 内容。示例代码如下： ```javascript // 定义一个名为 alert-box 的新组件 Vue.component('alert-box', { template: ` <div class="alert-box"> <strong>Error!</strong> <slot></slot> </div> ` }) // 创建一个 Vue 实例 var app = new Vue({ el: '#app' }) ``` 在上述代码中，我们定义了一个名为 alert-box 的组件，并在组件中定义了一个插槽。在 HTML 中，我们调用了 alert-box 组件，并在标签内部插入了一些 HTML 内容。示例代码如下： ```html <div id="app"> <alert-box> <p>Something bad happened.</p> </alert-box> </div> ``` 在上述代码中，我们调用了 alert-box 组件，并在标签内部插入了一些 HTML 内容。该 HTML 内容会被插入到 alert-box 组件的插槽中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值