Vue—动态组件&插槽&自定义指令

2024-03-11 11:47:19

动态组件&插槽&自定义指令

动态组件

动态组件，指的是动态切换组件的显示和隐藏。

如何实现动态组件渲染

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

使用keep-alive

可以把内部的组件进行缓存，而不是销毁组件

<script>
	<keep-alive>
    	<component :is = "com'"></component>
    </keep-alive>
</script>

Keep-alive对应的生命周期函数

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

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

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

当时，当组件被激活的时候，只会触发 activated 生命周期，不在触发 created 。因为组件没有被重新创建

keep-alive的 include 属性

include:只有名称匹配的组件会被缓存，多个组件中间使用,分割

exclude:指定谁不被缓存。

include 和 exclude 只能出现一个

<script>
	<keep-alive include = "Left">
    	<component :is = "com'"></component>
    </keep-alive>
</script>

扩展

当提供了 name 属性之后，组件的名称，就是 name 属性的值

对比

组件的 “注册名称”的主要应用场景是：以标签的形式，把注册好的组件，渲染和使用到页面结构之中

组件声明时候的“name”名称的主要应用场景：结合标签实现组件缓存功能，以及在调试工具总看到组件的 name 名称

插槽（slot）

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

注

如果要把内容填充到指定名称的插槽中，需要使用 v-slot: 这个指令

v-slot: 后面要跟上插槽的名字

v-slot: 指令不能直接用在元素身上，必须用在template标签上

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

具名插槽

作用域插槽

在封装组件时，为预留的提供属性对应的值，这种用法，叫做“作用域插槽”

App.vue根组件中的用法


<Article>
	<template #title>
        <h3>好诗~</h3>
    </template>
    <template #content="scope">
        <div>
           <p>啊，大海，全是水</p>
           <p>啊，蜈蚣，全是腿</p>
           <p>啊，辣椒，净辣嘴</p>
           <p>{{scope.msg}}</p>
        </div>
     </template> 
    <template #author>
            <h6>作者：leo</h6>
     </template>
 </Article>

自定义指令

自定义指令的分类

私有自定义指令

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

<script>
	export default{
        directives:{
            color:{
                //当指令第一次被绑定到元素上的时候，会立即触发bind函数
                //形参中的 el，表示当前指令所绑定到的那个  DOM 对象
                bind(el，binding){
                    el.style.color = binding.value
                },
                //每次 DOM  更新时被调用
                update(el,binding){
                    el.style.color = binding.value
                }
            }
        }
    }
</script>

函数简写

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

全局自定义指令

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

	Vue.directive('color',(el,binding)=>{
        el.style.color = binding.value
    	}
    })

码农公寓