vue第十一单元(内置组件)
第十一单元(内置组件)
#课程目标
- 熟练掌握component组件的用法
- 熟练使用keep-alive组件
#知识点
#1.component组件
component是vue的一个内置组件,作用是:配合is动态渲染组件
<component :is='组件'></component>
不同组件之间进行动态的切换
App.js:
<template>
<div>
<div>
<div>
<button @click="handleShow('Login')">登录</button>
<button @click="handleShow('Index')">首页</button>
</div>
<component :is="name"></component>
</div>
</div>
</template>
<script>
import Login from "./components/Login";
import Index from "./components/Index";
export default {
data() {
return {
name: "Login",
};
},
components: {
Login,
Index
},
methods: {
handleShow(name) {
this.name = name;
},
},
mounted() {
console.log('挂载父组件')
}
};
</script>
components/Login.vue:
<template>
<div>
登录
</div>
</template>
<script>
export default {
mounted() {
console.log('挂载登录组件')
},
beforeDestroy() {
console.log('销毁登录组件')
}
}
</script>
<style>
</style>
components/Index.vue:
<template>
<div>
首页
</div>
</template>
<script>
export default {
mounted() {
console.log('挂载首页组件')
},
beforeDestroy() {
console.log('销毁首页组件')
}
}
</script>
<style>
</style>
我们在父组件和子组件中分别定义个生命周期钩子mounted,页面加载到完成,父组件先渲染完成还是子组件先渲染完成呢?答案是子组件先渲染完成。
参考链接:https://blog.csdn.net/qq_42778001/article/details/99091540
#2.keep-alive组件
两个组件进行切换时,一个组件显示,另一个是组件隐藏还是销毁呢?答案是不断的创建与销毁的过程。 如果你想把组件的缓存下来,可以在动态组件上使用vue另一个内置组件keep-alive
<keep-alive>
<component :is='state'></component>
</keep-alive>
这样,当切换组件时,组件会被缓存下来,不会执行created 、mounted、beforeDestroy钩子函数。
是一个抽象组件:它自身不会渲染一个 DOM 元素,也不会出现在父组件链中。
vue第十一单元(内置组件)的更多相关文章
- 阅读vue源码-----内置组件篇(keep-alive)
1.前言: <keep-alive>是vue实现的一个内置组件,也就是说vue源码不仅实现了一套组件化的机制,也实现了一些内置组件. <keep-alive>官网介绍如下:&l ...
- Vue基础(环境配置、内部指令、全局API、选项、内置组件)
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- 通俗易懂了解Vue内置组件keep-alive内部原理
1. 官方介绍及其用法 1.1 组件介绍 要想搞明白<keep-alive>组件的内部实现原理,首先我们得搞明白这个组件怎么用以及为什么要用它,关于<keep-alive>组件 ...
- Vue内置组件[回顾]
1.动态组件 在某些场景,往往需要我们动态切换页面部分区域的视图,这个时候内置组件component就显得尤为重要. component接收一个名为is的属性,is的值应为父组件中注册过的组件的名称, ...
- Vue内置组件keep-alive的使用
本文主要介绍Vue内置组件keep-alive的使用. Vue内置组件keep-alive的使用 keep-alive接收三个props:●include - 字符串或正则表达式.只有名称匹配的组件会 ...
- form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
- vue-learning:33 - component - 内置组件 - 过渡组件transition
vue内置过渡组件transition 目录 什么是过渡 基本过渡或动画实现的语法 css过渡动画:transition / animation js过渡:特定事件钩子函数 各种情形下的过渡实现,使用 ...
- Django:内置组件Content-Type
12.Django组件之Content_Type 1.帮助我们生成了一张表,里面有所有表名.这样不再自建表在表中填表名,用Foreignkey获取 2.为了让我们快速进入插入数据,填写一个字段Gene ...
- Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色
1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...
随机推荐
- java后端开发三年!你还不了解Spring 依赖注入,凭什么给你涨薪
前言 前两天和一个同学吃饭的时候同学跟我说了一件事,说他公司有个做了两年的人向他提出要涨薪资,他就顺口问了一个问题关于spring依赖注入的,那个要求涨薪的同学居然被问懵了...事后回家想了想这一块确 ...
- 使用Camtasia 让照片变身动态视频
视觉化影像已经慢慢渗入我们平日的生活了,很多人已经慢慢地从单纯的文字记录,发展到使用照片记录生活,而视频化的记录也随着智能手机的普及而迅速发展起来.对于一些曾经使用照片记录的瞬间,我们也可以将其变身为 ...
- iOS问题:pch not found
问题描述: clang: error: no such file or directory: '/Users/apple/Desktop/迅点App_Mark/FaceHelp/FaceHelp-Pr ...
- api-hook,更轻量的接口测试工具
前言 在网站的开发过程中,接口联调和测试是至关重要的一环,其直接影响产品的核心价值,而目前也有许多技术方案和工具加持,让我们的开发测试工作更加便捷.接口作为数据传输的重要载体,数据格式和内容具有多样性 ...
- 2020 CSP-J 多校赛 Day 2 T2 题解
0x01 引入 在考场时想了一个错误算法,口胡一下,或许对理解正解有点帮助. 我们考虑交换两个数产生的代价,你会发现我们需要让大的数重复被交换的次数尽可能少,减少它对后面的代价. 那么不难构思出一个按 ...
- Matlab 数值计算
本博客记录一些简单的计算 det(A):矩阵求行列式 A=[1,2;3,4]; det(A) ans=-2; inv(A):矩阵求逆 A=[1,2;3,4]; B=inv(A) B=[-2,1;1,5 ...
- native关键字是干什么的?
目录 1.怎么调用到native方法的呢? 2. java调用自定义native方法步骤 3.使用native的缺点 今天一不小心跟进Object的源码中,发现一个native关键字,一脸蒙蔽,怎么我 ...
- jvm系列(一)运行时数据区
C++程序员肩负着每一个对象生命周期开始到终结的维护责任.Java程序员则可以借助自动内存管理机制,不需要自己手动去释放内存.由虚拟机进行内存管理,不容易出现内存泄漏和内存溢出的问题,但是一旦出现这些 ...
- 【证书】curl 和 java 请求报证书错误
1. 说明: 以下:例子的域名因为工作环境的问题,被我拿自己的博客域名替代了,所以无法进行模拟测试,请珍重,哈哈! 2. 环境: centos:7.5 java jdk:1.8.0_74 3. cur ...
- 02-Python里字符串的常用操作方法--split()函数和join()函数
1.split() --分割,返回一个列表, 会丢失分割字符 实例: my_str = 'you and me and he' list01 = my_str.split('and') list02 ...