㈠ 15《Vue 入门教程》Vue 动态组件 & keep-alive
本小节我们将介绍 Vue 的动态组件，以及缓存 keep-alive 的使用。包括动态组件的使用方法，以及如何使用 keep-alive 实现组件的缓存效果。
动态组件是让多个组件使用同一个挂载点，并动态切换。动态组件是 Vue 的一个高级用法，但其实它的使用非常简单。keep-alive 是 vue 的内置组件，能在组件切换过程中将状态保存在内存中，防止重复渲染 DOM。
通过使用保留的 元素，动态地把组件名称绑定到它的 is 特性，可以实现动态组件：
实例演示
"运行案例" 可查看在线运行效果
代码解释： HTML 代码第 2 行，我们使用动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 3-5 行，我们定义了三个按钮，通过点击按钮切换 currentView 的值。 JS 代码第 3-11 行，我们定义了组件 ComponentA、ComponentB、ComponentC。
最终的实现效果是：当点击按钮的时候会动态切换展示的组件。
keep-alive 是 Vue 提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个 DOM 元素。被 keep-alive 缓存的组件只有在初次渲染时才会被创建，并且当组件切换时不会被销毁。
keep-alive 的用法相对简单，直接使用 keep-alive 包裹需要缓存的组件即可：
实例演示
"运行案例" 可查看在线运行效果
代码解释： HTML 代码第 2-3 行，我们使用 keep-alive 包裹动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-7 行，我们定义了三个按钮，通过点击按钮切换 currentView 的值。 JS 代码第 3-29 行，我们定义了组件 ComponentA、ComponentB、ComponentC，分别定义了他们的 created 和 beforeDestroy 事件。
之前我们介绍过， keep-alive 缓存的组件只有在初次渲染时才会被创建。所以，我们通过修改 currentView 切换组件时，组件的 beforeDestroy 事件不会触发。若该组件是第一次渲染，会触发 created 事件，当再次切换显示该组件时，created 事件不会再次触发。
activated 和 deactivated 和我们之前学习的生命周期函数一样，也是组件的生命周期函数。不过， activated 和 deactivated 只在 内的所有嵌套组件中触发。 activated ：进入组件时触发。 deactivated ：退出组件时触发。
示例代码：
实例演示
"运行案例" 可查看在线运行效果
代码解释： JS 代码中，我们定义了组件 ComponentA、ComponentB，并分别定义了他们的 activated 和 deactivated 事件函数。 HTML 代码第 2-3 行，我们使用 keep-alive 包裹动态组件 component，将当前需要展示的组件名通过变量 currentView 绑定到 component 的 is 属性上。 HTML 代码第 5-6 行，我们定义了两个按钮，通过点击按钮切换 currentView 的值。当我们切换组件显示时，可以看到这样的打印信息：
include 和 exclude 是 keep-alive 的两个属性，允许组件有条件地缓存。 include： 可以是字符串或正则表达式，用来表示只有名称匹配的组件会被缓存。 exclude： 可以是字符串或正则表达式，用来表示名称匹配的组件不会被缓存。
示例：
实例演示
"运行案例" 可查看在线运行效果
代码解释： HTML 代码第 2-4 行，我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定需要缓存组件 ComponentA，ComponentB。 在之前的小节我们了解到 keep-alive 缓存的组件只有在初次渲染时才会被创建。所以，在案例中，组件 ComponentA 和 ComponentB 的 created 函数只有在第一次组件被创建的时候才会触发，而 ComponentC 的 created 函数当每次组件显示的时候都会触发。
exclude 示例：
实例演示
"运行案例" 可查看在线运行效果
代码解释： HTML 代码第 2-4 行，我们使用 keep-alive 包裹动态组件 component。给 keep-alive 指定不需要缓存组件 ComponentA，ComponentB。
本节，我们带大家学习了动态组件和缓存组件在项目中的运用。主要知识点有以下几点：
㈡ vue在不点击组件的情况下怎么生成组件
这里分享下vue在不点击组件的情况下生成组件的方法。
设备：联想电脑
系统：xp
软件：VUE APPv1.9.23
1、首先在打开的软件中，创建一个js文件，用于存放组件。
㈢ Vue中动态注入组件
源自 https://juejin.im/post/5de1d7d25188252112798118
Mark留存
㈣ vue项目实现动态路由和动态菜单搭建插件式开发框架免费源码
以往我们在开发vue项目的时候，总是通过将路径和路由写在route/index.js文件中，然后直接进行访问即可，一般实现权限匹配都是通过菜单下面的权限参数和路由守卫进行一个验证拦截和权限匹配，然而这样安全性仍然不足。因为我们在route/index.js中已经写满了所有的路由，这样子不仅造成静态路由内容过多、修改困难，同时当静态路由内容过多的时候，我们在路由中的内容就显得极其复杂。
而后端对前端的控制也显得较为无力，无法实现严格性的控制。
由此我们发现通过动态路由控制是必然的，此时我们只需要通过后端获取数据菜单和路由信息json，然后动态添加路由并生成菜单，使菜单与动态路由内容进行一个匹配，这样子我们可以实现由后端控制前端的菜单和路由，我们的项目往往只需要内置几个组件无需权限的公共页面如登陆、注册、忘记密码和404错误这几个常用页面组件。
我们只需要将写好的组件放置到我们的view视图下，然后我们通过动态的路由和菜单实现路由添加和菜单进行匹配，我们便可实现对插件进行访问，我们减少了对route/index.js内容写入，同时也有利于减少内存的占用。
我们通过动态路由的形式，我们生成的菜单权限更加的完善，不仅实现依靠菜单与路由守卫拦截实现鉴权，也可以通过动态路由实现动态加载vue文件，控制更加深度
我们通过动态路由的形式，我们可以将项目分给不同的人进行完成，便于组建一个开发团队，因为他们所开发的组件，我们只需要在具备基本的javascript库的情况下。我们直接进行动态路由的一个挂载和菜单生成便可完成项目合作，减少了对route/index.js文件的操作，保证项目的完整性。
最后我发现在非node环境的开发条件下，我们可以实现远程的vue文件加载，这不仅为我们开发提供了便利，同时也有利于我们及时修改文件，以达到项目的需求，更有利于保障安全，实现服务器vue文件加载。
Vue：2.6.11。
Vue-route：3.2.0。
主页
聊天
第一通过后端返回的一个路由json数据，我们通过前端生成符合路由路由静态内容数组的一个数组，然后再通过addRoute进行一个循环添加，我们以此生成动态路由。在登陆时获取后端返回的菜单信息，我们进行菜单的一个循环生成，由此我们的一个动态项目就已经完成。
第二怎样对动态路由和菜单项目进行一个管理。
我们首先可以通过搭建一个组件通过添加路由信息和管理菜单实现二者的动态匹配。我们只需要对路由信息进行一个添加和修改，并和菜单相互间进行匹配，我们便可实现简单的路由挂载。
组件管理
菜单管理
此时将数据提交的后端由后端进行数据保存，我们此时的组件只需要放在views文件夹下，添加路由进行文件加载，我们便可实现路由管理。
第一登陆页面配置。
我们需要在静态文件夹下创建一个menu.json和route.json。两个json文件模拟服务器登录时返回的数据。
我们在登录页面模拟获取数据之后，我们通过菜单的一个方法进行生成菜单，通过路由的方法生成路由数组并进行循环添加，然后执行路由跳转。
第二配置路由初始化内容。我们将route/index.js的路由信息填为空是非常不理智的，而且会报错，因为路由初始化在加载前已经完成。有些页面完全不需要权限便可访问，比如登录、注册、找回密码和404错误，这种不需要权限的页面，我们还是需要将其直接以静态的形式写在route/index.js文件中。
Index初始数据
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue . use ( VueRouter )
const routes = [{
path: '/' , //访问url
name: 'login' , //路由名称
component : () => import ( '@/unitui/pages/Login.vue' ), //加载模板文件
meta: {
show_site: 0 , //是否全屏显示
web_title: "登录" //网站标题
}
},
{
path: '/register' , //访问url
name: 'register' , //路由名称
component : () => import ( '@/unitui/pages/Register.vue' ), //加载模板文件
meta: {
show_site: 0 , //是否全屏显示
web_title: "注册" //网站标题
}
},
{
path: '/forget' , //访问url
name: 'forget' , //路由名称
component : () => import ( '@/unitui/pages/Forget.vue' ), //加载模板文件
meta: {
show_site: 0 , //是否全屏显示
web_title: "找回密码" //网站标题
}
},
{
path: '/404' , //访问url
name: '404' , //路由名称
component : () => import ( '@/unitui/pages/404.vue' ), //加载模板文件
meta: {
show_site: 0 , //是否全屏显示
web_title: "404错误" //网站标题
}
},
]
const router = new VueRouter ({
routes
})
router . beforeEach (( to , from , next ) => {
document . title = to . meta . web_title
console . log ( to );
next ()
})
export default router
第三，关于防止刷新后丢失的问题。我们需要在app.vue文件中的methods方法中定义一个路由生成方法。
示例：
init_route () { //初始化路由，防止刷新丢失
if ( sessionStorage . getItem ( "route_data" ) != null ) { //只有后端已经返回数据的情况下才允许生成
const route_data = JSON . parse ( sessionStorage . getItem ( "route_data" )); //获取路由信息
const data = []; //默认路由数组
for ( let index = 0 ; index < route_data . length ; index ++) { //生成路由信息
data [ index ] = {
path: route_data [ index ]. path , //访问url
name: route_data [ index ]. name , //路由名称
component : resolve =>
require ([ `@/views/ ${ route_data [ index ]. component } ` ], resolve ), //加载模板文件
meta: {
show_site: route_data [ index ]. meta . show_site , //是否全屏显示
web_title: route_data [ index ]. meta . web_title //网站标题
}
};
}
for ( let index = 0 ; index < data . length ; index ++) { //循环添加路由
this . $router . addRoute ( data [ index ]);
}
}
}
在mounted中进行方法调用，防止刷新的时路由丢失，导致发生错误。该方法内容基本和登陆页面的菜单出路由初始内容基本相同，但我们唯一差别的是，我们需要判断登陆所获取的路由信息是否存在，只有在存在的时候及后端已经返回了路由信息，即证明登录成功的时候，我们才会动态添加路由。
第一在刷新之后，默认跳转到path:’*’的一个路由界面中去，此时我们解决方法只需要将path:’*’路由进行一个删除,将其删除就变可正常访问。
第二动态路由跳转时发生Cannot find mole xxx错误。
意思是无法加载我们指定的一个vue文件，这是由于route3.0版本后import方式不支持传入变量，此时我们只需要将其改为require方式便可。
我们此次动态vue项目开发已经基本完成，我的开发的项目是基于element-ui进行，那么如果你需要源码参考。可以私信回复unit便可获取。
㈤ 关于Vue动态组件的插入
工作中经常使用elementUI组件，处理大型表单页面时经常在template里写各种乱七八糟的组件，有时候经常想用v-for来处理组件，经常忘记，特做一笔记
js文件写法：
对于组件内插槽，可以使用插入template的方法动态加载
㈥ vue 通过 component 动态渲染组件
注：自定义组件名称不可与内置标签名称重复（如：input、el-input等等...）
注：如果想动态引入多个不同的组件，可创建多个组件文件，并在assembly.js中定义名称，render.vue中通过v-for循环出来
特别备注：
参考借鉴网址： https://www.jianshu.com/p/ae50ece6cbaa
㈦ vue中父组件如何动态修改子组件的值
1.使用ref修改
$refs:
在Vue中，父组件可以通过 $refs来管理通过ref注册过的所有子组件，即 $refs对象下可以包含很多 $ref对象.
创建两个组件分别是父组件：aaa.vue 子组件：bbb.vue
父组件操作（aaa.vue）
在子组件上添加ref=“child”命名。
给按钮添加一个方法，
方法内使用 this.$refs.child.dlshow=true直接修改子组件的data数据中的dlshow内容。
方法内使用this.$refs.child.dlff(1)给子组件的dlff方法传递参数1
/*父组件*/
登录一下吧
子组件操作（bbb.vue）
2.使用props传递父传子
props是通过父组件值扔给给子组件，子组件使用props来接住值！
父组件操作（aaa.vue）
给子组件使用v-bind传过来的键名和它的值:shuju=“dlshow”
在data中定义对应的dlshow
/*父组件*/
登录一下吧
子组件操作（bbb.vue）
使用props接收父组件扔过来的key键和参数类型。
原文链接：https://blog.csdn.net/m0_57146100/article/details/119617880
㈧ vue中异步组件实现动态挂载
首先，我们要明确什么是异步加载组件，那与之对应的同步加载组件又是怎么一回事呢？字面意思就是，同步加载就是指，随着项目的初始化完成，所有要用到的组件都已经被加载到页面中了，有时候，我们是通过设置样式的方式让其隐藏。虽然这种方式能解决我们的大部分问题，但是在追求 首屏加载时间最短 的情况下，一次性加载所有的组件，并不是一个很明智的选择。
我们可以通过先加载一部分页面必须的组件，另外一部分组件当需要的时候在加载，比如 登录组件 ，当我们点击 登录按钮 的时候，再加载登录组件。
为了我们可以看到效果，我们要移步到浏览器的netWork面板。当页面初始化的时，加载的文件如下图所示
0.js
从中，我们可以看出组件异步加载的身影了！
㈨ [vue3进阶] 2.动态组件
之前我们用到一个组件的时候，在模板里写上组件的标签就可以使用了
这样，在页面上就会显示这个组件，这个组件是固定的
动态组件是不固定要显示哪个组件，只是有个component标签，表示在模板的相应位置有一个组件，
它具体显示哪个组件，要根据它的is属性来决定
is绑定currentComponent是一个字符串，表示一个组件的名字，组件名字改变时，component标签这个位置显示的组件就会变化
还是用我们之前用过的两个组件做示例，表示两个不同的组件componentA和componentB，在点击按钮时，切换组件，
点击按钮就可以切换显示的组件
动态组件的内容就是这么简单，下面我们来举一个实际应用中的例子，
比如在一个应用中的个人中心，有几个模块
假如这几个模块显示的顺序，或者哪个模块显示、哪个模块不显示是根据用户的不同有所区别的，
那么我们可以使用动态组件去实现这个功能，
1）把这个组件名字都放到一个数组里，
2）通过for循环把这些组件用动态组件写在template中
3）控制数组的顺序和内容，实现组件的顺序和显示
这节课就是这些内容了，下节课再见。
㈩ Vue组件的使用
通过ref来获取页面上的dom
若在一个组件<item>中添加上ref，那么获取到的dom就是对应的组件，也就是可以获取到组件的引用。
可以获取到组件中定义的data数据
父组件传值给子组件通过属性来传。
过来的值赋值给定义的值，然后修改那个值
子组件通过事件触发来向父组件传值
定义一个全局组件
父组件给子组件通过属性传递一些值，而子组件做的一些约束就是组件的参数校验
父组件要传一个名叫content的属性，而子组件刚好定义了content的prop，这个就是props特性
非props特性
例如：给子组件的标签中定义一个click事件
上面的实现是错误的，原因就是在子组件中定义的@click中的click是监听的自定义事件的名称，它是接收子组件触发的事件名称，如：this.$emit('click')，@click是接收这样的事件的，并不是我们熟知的点击事件
实现上面的例子
方法一：
方法二
在click中添加.native就可标明为原生事件
方法一，使用Vuex
方法二，使用发布订阅模式，也称为总线机制
怎么使父组件给子组件优雅的传递dom，例如父组件要给子组件传递<p>Dell</p>
按以往的方法应该是
使用slot可以解决问题
如果template中有多个<slot>，那怎么确定哪个slot要那些dom呢
可以通过名称来确定对应的dom，如
通过动态组件来怎么实现呢
切换的时候，每次都是先销毁，然后再创建子组件，每次切换都销毁和创建
v-once就是为了避免这种情况的发生，使用v-once第一次展示的时候，会将组件放到内存中，第二次就不需要创建组件了，可以直接从内存中读取到
参考
Vue.js API文档
慕课网：Vue2.5开发去哪儿网App 从零基础入门到实战项目