Vu基础及其开发11

第四章Vue组件学习目标熟悉Vue中组件的概念和定义掌握Vue中组件注册的方式掌握Vue组件之间数据的传递熟悉组件插槽技术的使用熟悉动态组件的使用在第二章我们已经学习到，在Vue应用中必须有一个根组件，而组件是Vue基础核心组成之一。组件化的开发使得开发者有能力将UI进行拆分实现独立、可重用的封装设计，并通过组件的组合嵌套等方式实现复杂的页面结构，大大提高了页面开发的灵活性和可维护性。组件概念和定义12组件的注册和使用3组件中数据的传递4动态组件5Slot插槽技术组件概念和定义1．组件的概念随着前端页面复杂度的增加，处理的逻辑越来越多，代码量也越来越大。很多页面会因为同样的UI处理逻辑而出现大量重复的代码逻辑。同时，由于缺少规范，不同项目成员的代码质量层次不齐，导致代码逻辑的维护成本高、开发效率低、开发成本高、灵活性也受到限制。这时候，开发者开始思考如何对HTML标签进行扩展，将页面中某一部分的UI逻辑独立出来，这部分UI逻辑包括UI视图、数据以及具备功能的封装。通过将这些UI逻辑封装为一个整体，暴露一些属性和函数供外部调用，这样的封装部分作为一个整体无论放在哪里都具有一样的功能和样式，从而实现了复用和解耦。而这个封装的整体就是组件Component，这种设计被称为组件化设计；组件化设计大大降低了页面复杂度和开发成本，同时提高了开发效率和灵活性。Vue就是一个典型的组件化设计。Vue中允许我们将UI划分为独立的、可重用的组件，每个组件内部都封装了自定义内容与逻辑，使用这些组件就可以拼凑成一个完整的页面应用。和嵌套HTML元素的方式类似，实际应用中，Vue组件模型常常被组织成层层嵌套的树状结构。

Vue自定义指令组件概念和定义2．组件的定义在Vue中，定义组件有两种方式可以实现：一种是使用构建步骤把Vue组件定义在单独的一个.vue文件中，这也是我们后面章节中要讲解的单页面组件SFC；另外一种就是使用一个包含Vue特定选项的JavaScript对象来定义。本章节中要讲解就是第二种定义方式，这里以定义搜索组件为例。

代码中，定义组件的方式与定义Vue根组件相似，可以在组件对象中定义data、methods、computed属性等。除此之外，自定义的组件还定义了props和template两个属性。其中template是组件内视图的DOM模板，DOM模板必须包含有一个根节点。同时，在非vue文件中定义template时，需要使用反引号``嵌套DOM模板。组件概念和定义当然也可以在Vue根标签之外定义一个<template>标签，然后通过id等方式关联。

代码中，props表示定义组件的属性，组件可以有多个属性，所以props的值为数组；props的作用除了可以用来定制组件功能外，还可以用来父组件给子组件进行数据传递。组件概念和定义12组件的注册和使用3组件中数据的传递4动态组件5Slot插槽技术组件的注册和使用组件和指令一样需要注册才能使用，注册的组件可以在其父组件中被多次使用。组件的注册分为全局注册和局部注册两种方式。1．全局注册全局注册的组件可以在Vue应用中全局可用，全局注册使用ponent()方法实现，component()方法中需要传递一个组件名和组件实例对象。

组件的注册和使用组件注册时，组件名命名需要是PascalCase帕斯卡命名（首字母大写的驼峰命名）或kebab-case短横线分割的命名方式。组件使用时，在HTML文件中使用，限于DOM模板解析时不识别大小写等限制，只能使用kebab-case命名；而如果在.vue文件中则同时支持PascalCase和kebab-case命名的使用。虽然全局注册非常简单方便，但Vue并不推荐大量使用组件的全局注册方式。这是因为全局注册存在两个主要问题：(1)全局注册的组件在项目打包是无法被Tree-Shaking。也就是说如果全局注册的组件没有在项目中用到，但是打包的时候依然会被打包到JS文件中。(2)全局注册的组件如果使用在大型项目中，其组件的依赖关系会非常的错综复杂，依赖关系也不明确，这大大提高了组件的维护难度。组件的注册和使用2．局部注册组件局部注册是Vue中按需导入的注册方式，局部注册使用Vue实例的components选项进行注册。相比于全局注册，局部注册的组件需要在使用它的父组件中显式导入，并且只能在该父组件中使用。它的优点是使组件之间的依赖关系更加明确，并且对Tree-Shaking更加友好。这里依然以搜索组件的注册为例。组件概念和定义12组件的注册和使用3组件中数据的传递4动态组件5Slot插槽技术组件中数据的传递组件的最大优势在于其独立性和可复用性。如果希望定义的组件在任何地方使用都具备相同的样式和功能，需要组件具有很好的灵活配置特性。而组件的灵活配置主要体现在数据传递的实现上，通常需要定义子组件和使用它的父组件之间的数据传递。即父组件将数据传递给子组件以实现其功能，子组件通过内部事件触发可以改变父组件的数据渲染。在Vue中实现父组件和子组件数据传递的方式有很多，可以通过props属性、$emit监听事件、v-model指令以及slot插槽技术来实现。1．props属性传递在定义组件时，可以在组件内部定义一个props选项，即组件属性。props的期望值是一个字符串数组或对象，这意味着一个组件可以拥有任意数量的props属性，并且所有prop都可接受任意类型的值。当组件注册后，其定义的props可以像标签的普通属性一样使用，利用这个特点可以将父组件中的数据以属性值的方式传递到子组件中，通过props的数据传递可以灵活的实现子组件的配置。下面以一个自定义按钮组件为例来介绍下props数据传递的使用。

组件中数据的传递

代码中，定义了一个MyButton的组件，并定义了value、disabled、type三个属性。其中value表示按钮显示的内容，disabled由父组件传递数据来控制按钮是否可用，type属性由父组件传递数据控制按钮显示的样式。组件中数据的传递我们在根组件app中设置两个my-button组件，然后运行代码，效果如图所示。温馨提示在HTML文件中，组件在被多次调用时，如果使用的是单标签，只会显示第一个组件，需要改成双标签才可以正常显示多个组件。组件中数据的传递2．$emit监听事件对于之前案例中的按钮组件，我们实现了通过父组件传递数据来控制子组件的数据渲染和样式的功能。但是作为按钮组件还需要能够响应点击事件，并且这个点击事件的处理逻辑不能放在子组件中，因为每个使用它的父组件的点击事件处理逻辑都是不同的。因此，我们需要将按钮组件的点击事件交给父组件来处理，这就需要使用$emit函数来实现。$emit()表示在当前组件触发一个自定义事件，该自定义事件是在父组件使用子组件的时候设置的回调函数。

组件中数据的传递

代码中，在子组件的button元素上绑定了一个click点击事件，然后在点击事件中触发了回调函数btnclick（触发的函数名在HTML文件中不能使用驼峰命名）；父组件在使用子组件的时候就可以绑定回调函数btnclick，从而触发其submit提交函数完成子组件事件的回调。组件中数据的传递当然$emit也支持使用回调函数的时候传递参数。组件中数据的传递3．组件配置v-model使用v-model指令除了可以使用在input、select等表单元素上，也可以是自定义表单组件。v-model指令可以实现表单数据的双向绑定，用法如下：Vue会通过响应式将content的数据绑定到input标签上，那v-model是怎么实现当输入内容之后也更新了content数据呢？上面的代码其实等价于下面的代码：<inputv-model="content"/><input:value="content"@input="content=$event.target.value"/>组件中数据的传递通过上述的代码可以得知，v-model其实就是通过对input标签的输入事件监听来更新content数据的。而如果在组件上使用v-model指令，其实等价于下面的代码。组件中数据的传递分析上面的代码可知，在组件上使用v-model的原理其实是先将内部原生input元素的value属性绑定到prop的value上。然后在输入新的值时，input元素上触发了update:modelValue事件，从而实现父组件searchText的更新。当表单元素组件按照v-model的原理设计好之后，就可以直接在组件上使用v-model指令了。温馨提示在HTML文件中，在自定义组件上使用@update:modelValue写法不会生效，因为HTML不识别大小写。但是如果想要组件上能够使用v-model，需要在$emit中使用'update:modelValue'写法才可以绑定modelValue属性。而这些在.vue文件中是不受影响的。组件中数据的传递默认情况下，v-model在组件上都是使用modelValue作为prop，并以update:modelValue作为对应的事件。如果想要更改v-model绑定prop的名字，可以通过给v-model指定一个参数来更改。

代码中，给v-model指定了一个value的参数从而实现了数据的绑定。利用这个特点，可以在一个组件上使用多个v-model指令进行多个数据的双向绑定操作，每一个v-model都会绑定不同的属性。组件概念和定义12组件的注册和使用3组件中数据的传递4动态组件5Slot插槽技术Slot插槽技术如果希望组件像HTML中DIV这种双标签一样可以在标签内部直接传递内容并渲染数据,就可以使用Vue提供的插槽技术来实现。1．Slot插槽的基本使用在自定义组件的DOM模板中可以通过<slot>元素来定义插槽，<slot>定义的位置就是插槽出口，它标示了父组件提供的插槽内容将在哪里被渲染。下面还是以按钮组件为例。

Slot插槽技术上述代码中，按钮组件中的<button>中定义了一个<slot>插槽，在使用按钮组件的时候，只要在标签中间插入内容将自动插入到插槽中进行渲染显示。如果在使用按钮组件的时候没有给插槽传递内容，那么插槽将会显示默认的内容。运行代码，并在浏览器中通过F12可以看到，上述代码最终被渲染为：插槽的内容是在父组件中传递的，因此可以把父组件中定义的data数据传递到子组件的插槽内。插槽的内容不仅仅限于字符串，可以是任何合法的模板内容，包括其他的组件、指令等。插槽是有作用域的，插槽的内容只能访问到其定义所在的父组件作用域范围内的数据，而无法访问子组件的数据。<buttonclass="custom-btn">按钮</button><custom-button>{{content}}</custom-button>Slot插槽技术2．具名插槽具名插槽（NamedSlots）顾名思义是一种带有名称的插槽。有时候需要在一个组件中包含多个插槽出口，此时就需要定义多个<slot>标签，通过为每个插槽添加name属性来区分它们。这样在使用插槽的时候，就可以明确传递内容到哪个具名插槽中进行渲染，从而实现更加灵活的组件设计。使用具名插槽时，需要在组件的使用处添加一个包含v-slot指令的<template>元素，并在指令后面跟上要使用的插槽的名称，以明确指定要将内容传递到哪个插槽中进行渲染。Slot插槽技术“v-slot:name”可以使用“#name”的格式更加简化的表达具名插槽。运行上述代码，可以看到内容传递到了name为title的插槽中，如图所示。Slot插槽技术3．作用域插槽前面提到插槽具有作用域只能访问其父组件作用域范围内的数据。然而，有些场景确实需要在插槽中同时使用父组件和子组件作用域数据。为了实现这个功能，需要一种方法来让子组件在渲染时将一部分数据提供给插槽。这个方法就是通过<slot>的属性向上给父组件传递数据，在使用子组件的时候可以通过v-slot指令获取<slot>的属性对象，从而获取到子组件的数据，这种插槽就是作用域插槽（ScopedSlots）。Slot插槽技术上述代码中，v-slot指令声明在组件上，slot属性对象的命名可以是任意符合标准命名规范的名称。对于上述代码slot属性对象的使用，同样也可以使用ES6语法解构的方式。组件概念和定义12组件的注册和使用3组件中数据的传递4动态组件5Slot插槽技术动态组件在开发中，经常会遇到需要在不同组件之间切换的情况，例如常见的选项卡效果，选择不同选项卡将显示不同的布局。在Vue中，可以通过使用<component>元素的is属性来实现组件之间的动态切换。动态组件上述代码中，设计