IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue的进阶组件知识扩展 -> 正文阅读

[JavaScript知识库]vue的进阶组件知识扩展

  1. 什么是动态组件,如何使用动态组件,如何切换

在同一个挂载点,可以切换显示不同组件。vue内置的component组件,配合is属性。只要改变is属性的值,变为要显示的组件名即可

  1. 组件缓存

vue内置的keep-alive组件把要缓存的组件包起来,这要不会频繁的创建和销毁组件,页面更快呈现。通过组件的activated和deactivated来判断组件的存活状态

  1. 组件插槽

当组件内某一部分标签不确定时,可以使用插槽技术。先在组件内使用slot占位,使用组件时传入具体标签。传入的标签会替换掉slot显示。当我们在slot标签内写好默认要显示的内容,如果我们没有给组件传入具体标签或者内容,就会显示默认内容

  1. 具名插槽

当我们组件内有多处不确定的标签,用slot占位,给name属性起名字来区分。并且用template配个v-slot:name 分发要替换的标签

  1. 作用域插槽

当我们使用插槽时需要用到子组件内变量,此时需要用到作用域插槽。可以让组件更加灵活的使用于不同的场景和项目

  1. 自定义指令

当vue内置指令满足不了需求时,可以自己定义使用。

  1. vue中slot使用方法以及作用域插槽的用法

使用方式:当组件当做标签进行使用的时候,用slot可以用来接受组件标签包裹的内容,当给solt标签添加name属性的 时候,可以调换响应的位置
(高级用法) 插槽作用域: 当传递的不是单一的标签, 例如需要循环时, 把要循环的标签传入, 组件内使用v-for在slot标签上, 内部可以v-bind:把值传出来, 再外面把值赋予进去, 看示例

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

// current-user组件, user属性和值, 绑定给slotProps上
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
  1. 与Keep-alive有关的生命周期是哪些

在开发Vue项目的时候,大部分组件是没必要多次渲染的,所以Vue提供了一个内置组件keep-alive来缓存组件内部状态,避免重新渲染
activated钩子:在组件第一次渲染时会被调用,之后在每次缓存组件被激活时调用
Activated钩子调用时机:第一次进入缓存路由/组件,在mounted后面,beforeRouteEnter守卫传给 next 的回调函数之前调用,并且给因为组件被缓存了,再次进入缓存路由、组件时,不会触发这些钩子函数,beforeCreate created beforeMount mounted 都不会触发。
deactivated钩子:组件被停用(离开路由)时调用。
deactivated钩子调用时机**:使用keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁),因为组件没被销毁,被缓存起来了,这个钩子可以看作beforeDestroy的替代,如果你缓存了组件,要在组件销毁的的时候做一些事情,可以放在这个钩子里,组件内的离开当前路由钩子beforeRouteLeave => 路由前置守卫 beforeEach =>全局后置钩子afterEach => deactivated 离开缓存组件 => activated 进入缓存组件(如果你进入的也是缓存路由)

  1. 自定义指令的方法有哪些?它有哪些钩子函数?

全局定义指令:在vue对象的directive方法里面有两个参数,一个是指令名称,另外一个是函数。组件内定义指令:directives
钩子函数:bind(绑定事件触发)、inserted(节点插入的时候触发)、update(组件内相关更新)
钩子函数参数:el、binding

  1. 组件is的特性如何使用

1)动态组件< component :is=“componentName”>< /component>, componentName可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。 当控制componentName改变时就可以动态切换选择组件。
?2) 有些HTML元素,诸如 < ul >、< ol >、< table >和< select >,对于哪些元素可以出现在其内部是有严格限制的。 而有些HTML元素,诸如 < li >、< tr > 和 < option >,只能出现在其它某些特定的元素内部。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-27 11:46:11  更:2021-08-27 11:46:46 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 12:49:13-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码