【vue学习笔记】四、动态组件&插槽&自定义组件

最新推荐文章于 2025-05-27 14:36:04 发布

Quindrich

最新推荐文章于 2025-05-27 14:36:04 发布

阅读量528

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/quindrich/article/details/123696457

本文深入探讨Vue中的动态组件、插槽及其使用，包括keep-alive的缓存机制，自定义组件的命名规则，以及自定义指令的创建与应用，详细解析了v-slot的使用、作用域插槽和自定义指令的生命周期函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四、动态组件&插槽&自定义组件

1）动态组件

1.动态组件的使用

vue提供了一个内置的<component>组件，用来实现组件的动态渲染

is属性里的值表示要渲染的组件的名字

<component is="Left"></component>

2.keep-alive

在给is赋值切换组件的时候，会把旧的组件销毁再创建新的组件，如果想要组件不被销毁，则可以使用<keep-alive>标签将<component>包裹，此时切换组件会把旧组件进行缓存，而不是销毁组件

<keep-alive>
<component is="Left"></component>
</keep-alive>

3.keep-alive对应的生命周期函数

当组件被缓存时，会自动触发组件的deactivated生命周期函数

当组件被激活时，会自动触发组件的activated生命周期函数

当组件第一次被创建的时候，既会执行created生命周期，也会执行activated生命周期

当组件被激活时，只会触发activated

4.keep-live的include与exclude属性

include属性来指定：只有名称匹配的组件会被缓存，多个组件用逗号分隔

<keep-alive include="Left,Right">
<component is="Left"></component>
</keep-alive>

exclude则用来排除不需要被缓存的组件，使用方法与include一致，两个属性不能同时使用

5.组件的名称

如果在声明组件的时候，没有为组件指定name名称，则组件的名称默认就是注册时候的名称

如果在组件内部创建了name属性，组件的名称就是name属性的值（与data平级）

注意，实际开发中最好每一个组件都需要用name属性命名！

组件名称对比：

组件的“注册名称”的主要应用场景是：以标签的形式，把注册好的组件，渲染和使用到页面结构之中
组件声明的时候“name”名称的主要应用场景：结合<keep-alive>标签实现组件缓存功能，以及在调试工具中看到组件的name名称

2）插槽

1.什么是插槽

插槽(Slot)是vue为组件的封装者提供的能力，允许开发者在组装组件时，把不确定的、希望由用户指定的部分定义为插槽

2.插槽的使用

vue官方规定，每一个slot插槽都需要有一个name名称

如果省略了name属性，则有一个默认名称叫做default

默认情况下，在使用组件的时候提供的内容都会被填充到名字为default的插槽之中

只要slot有自己的名称，它就是一个具名插槽

<Left>
<p>在Left组件中创建的p标签</p>
</Left>

<div>
    <h3>Left组件</h3>
    <hr>
    <slot></slot>
</div>

3.v-slot

希望指定内容放到指定的slot里面，则需要把内容包裹在<template>标签里，然后在<template>标签指定v-slot:插槽的名字

<Left>
    <template v-slot:default>
    <p>在Left组件中创建的p标签</p>
    </template>

</Left>

<template>标签是一个虚拟的标签，只起到包裹的作用，但是不会被渲染为任何实质性的html元素

v-slot的简写形式是#

<Left>
    <template #default>
    <p>在Left组件中创建的p标签</p>
    </template>

</Left>

4.后备内容

封装组件时，可以为预留的<slot>提供后备内容（默认内容），如果组件的使用者没有提供内容则会显示后备内容

5.作用域插槽

插槽在设定的时候可以通过设定自定义的属性来给插槽的使用者传值

<slot name="content" msg="hello vue.js"></slot>

使用者在#插槽名后加一个="变量名"即可接收到这个变量

<template #content="scope"></template>

3)自定义指令

1.自定义指令分类

私有自定义指令（跟组件走）
全局自定义指令

2.私有自定义指令

在每个vue组件中，可以在directives节点下可以声明自定义指令

<script>
export default{
    directive: {
        color: {
            //为绑定到的HTML元素设置红色的文字
            bind(el){
                //形参中的el是绑定了此指令的、原生的DOM对象
                el.style.color = 'red'
            }
        }
    }
}
</script>

在使用时需要加v-前缀

<h3 v-color>App 根组件</h3>

3.binding.value

在使用自定义指令传值时，可以用binding参数来接收，写在bind(el,binding)的位置

<h3 v-color="red">App 根组件</h3>

<script>
export default{
    directive: {
        color: {
            bind(el, binding){
                el.style.color = binding.value
            }
        }
    }
}
</script>

4.update函数

bind函数只会调用一次，当指令第一次绑定到元素时调用，当DOM更新时bind函数不会再次调用，如果需要在DOM更新时指令被执行，则需要用update函数

<script>
export default{
    directive: {
        color: {
            bind(el, binding){
                el.style.color = binding.value
            },
            update(el, binding){
                el.style.color = binding.value
            }
        }
    }
}
</script>

5.函数简写

如果bind和update函数中的逻辑完全相同，则对象格式可以被简写

<script>
export default{
    directive: {
        color(){
                el.style.color = binding.value
        }
    }
}
</script>

6.全局自定义指令

全局共享的自定义指令需要通过Vue.directive()在main.js里进行声明

//参数1：字符串，表示全局自定义属性的名字
//参数2：对象，用来接收指令的参数值
Vue.directive('color', function(el, binding)){
	el.style.clor = bind
}