Vue-动态组件和插槽

2024-05-12 22:52:01

一、动态组件

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

如何实现动态组件渲染

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

使用方法：

当我们使用默认这种写法时，我们会发现，如果在right进行了操作，再切换到left，再次切换到right时，right上的操作不会缓存下来
我们就通过以下方式，解决这一问题：

使用 keep-alive 保持状态

keep-alive默认缓存所有组件，我们可以通过include属性，来自己选择缓存哪些部分

include：

只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔

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

只有组件被缓存时，会自动触发组件的 deactivated 生命周期函数。
当组件被激活以及组件第一次被创建的时候时，会自动触发组件的 activated 生命周期函数

二、插槽

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

默认插槽使用方法：

页面显示效果：

★ 注意：如果在封装组件时没有预留任何插槽，则用户提供的任何自定义内容都会被丢弃。

后备内容：

封装组件时，可以为预留的插槽提供后备内容（默认内容）。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。

具名插槽

如果标签没有显示的指定要渲染到哪个插槽中，则会被渲染到名字为default的插槽里面去

注意：要在元素上使用 v-slot 指令

页面显示效果：

具名插槽的简写形式：

把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header可以被重写为 #header：

作用域插槽

在封装组件的过程中，可以为预留的插槽绑定 props 数据，这种带有 props 数据的叫做“作用域插槽”。

Vue-动态组件和插槽相关推荐

【Vue知识点- No6.】动态组件、插槽、自定义指令、tabbar案例
动态组件.插槽.自定义指令学习目标 1.能够了解组件进阶知识. 2.能够掌握自定义指令的创建和使用. 3.能够完成tabbar案例的开发. 1.组件进阶 1.0 动态组件问题:如何切换2个组件,互 ...
第十章：动态组件，插槽，自定义指令
第十章:动态组件,插槽,自定义指令本章任务动态组件插槽自定义指令 vant UI 组件库 axios的配置本章内容动态组件自定义指令一.动态组件 1.1 什么是动态组件概念:动态组件 ...
Day06_动态组件_插槽_自定义指令_tabbar案例
Day06_动态组件_插槽_自定义指令_tabbar案例文章目录 Day06_动态组件_插槽_自定义指令_tabbar案例知识点自测今日学习目标 1. 组件进阶 1.0 组件进阶 - 动态组件 ...
vue 动态组件组件复用_真正的动态声明性组件
vue 动态组件组件复用在这篇简短的文章中,我将重点介绍ADF动态声明性组件. 我的意思是一个众所周知的ADF标签af:declarativeComponent . 它可以用作将页面设计为页面片段和 ...
vue 动态组件使用教程
vue 动态组件的使用,下面进行介绍 1.基本使用新建组件 Article.vue <template><div><p>黄州东南三十里为沙湖,亦曰螺师店.予买田其 ...
Vue动态组件、组件缓存、组件激活和非激活、组件插槽、组件name
一.动态组件如何切换2个组件互斥的显示或者隐藏呢除了v-if 什么是动态组件? 多个组件使用同一个挂载点,并动态切换.这就是动态组件完成一个注册功能页面, 2个按钮切换, 一个填写注册信息, ...
【前端——vue】：过滤器、侦听器、计算属性、vue-cli、vue组件、动态组件、插槽、自定义属性、路由
一.过滤器 1.过滤器Filters(只能在vue2中使用) p标签里面看到的是后面函数的返回值,message相当于作为参数传给后面.竖线代表要调用过滤器. 过滤器函数必须定义到filters节点 ...
Vue基础学习笔记Day06_动态组件_插槽_自定义指令
今日目标: 能够了解组件进阶知识能够掌握自定义指令创建和使用学习内容: 学习目录: 组件进阶自定义指令今日总结面试题知识点自测组件创建, 注册和使用 - 伸手就来特别熟练指令的作用 1 ...
简单的了解下关于 VUE 的动态组件和插槽
组件进阶-props校验 props校验普通格式:props: ["propA", "propB"].没有类型检查高阶格式: props: { // ...
动态组件_插槽_自定义指令
目录一.动态组件二.组件缓存三.插槽 1.基本使用 2.具名插槽 3.作用域插槽 ①无名插槽作用域 ②具名插槽作用域四.自定义指令 1.局部 2.全局 3.自定义指令传值一.动态组件目标: ...

最新文章

热门文章