自定义动态组件，剩下的三种周期函数
Posted 勇敢*牛牛
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自定义动态组件，剩下的三种周期函数相关的知识，希望对你有一定的参考价值。
周期函数
在vue中有一个生命周期，它可以收集子孙组件中的错误信息，进行捕获
- err具体的错误 此信息是最为关键
- vm发生错误的虚拟dom对象
- info 相关提示信息
errorCaptured(err, vm, info)
console.log(err, vm, info)
子孙组件错误的捕获，它要返回一个布尔类型，如果为false，则不向上传递错误了
errorCaptured(err, vm, info)
this.error = true
return false
生产环境中，有时候返回报错信息，可能会有安全隐患（fetch）
得到错误信息，进行网络请求，发给服务器端，让他记录下面，然后我们在统一来处理问题
创建局部组件,它就是一个对象
局部组件，创建完成后，如果你要给别人使用，一定要在配置中进行对应的配置
const child2 =
template: `<div>child2</div>`,
created()
console.log('child2 --- created')
注册组件
const vm = new Vue(
el: '#app',
data:
title: 'aaaa',
,
components:
// key就是在使用时的标签名称
// value就是对应的局部组件对象
// child: child
child,
child2
动态组件 component 标签完成对应的切换显示
组件状态的激活/灭活（保留）
动态组件： 动态的根据data中的数据来完成，对应名称的组件的调用显示
<component :is="cmp"></component>
这里的is:它的值只能是components配置中的属性
include 它是一个数组，元素中对应的组件的name名称，写在此数组中，要进行缓存
exclude 它是一个数组，元素中对应的组件的name名称，写在此数组中，不进行缓存
<keep-alive :include="['login']">
<keep-alive :exclude="['login']">
<component :is="cmp"></component>
</keep-alive>
components:
reg, login
,
data:
cmp它的值 ，作为动态组件中的is属性所用，所以它的值只能是components配置中的属性
cmp: 'reg'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue学习使用</title>
<script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 动态组件 component 标签完成对应的切换显示 -->
<div>
<button @click="cmp='a1'">爱</button>
<button @click="cmp='b1'">不爱</button>
<h1>title</h1>
</div>
<hr>
<keep-alive :include="['a1','b1']" >
<component :is="cmp"></component>
</keep-alive>
</div>
<script>
const a1 =
name: 'a1',
template: `<div>我爱你</div>`
const b1 =
name: 'b1',
template: `<div>我不爱你</div>`
const vm = new Vue(
el: '#app',
components:
a1, b1
,
data:
// cmp它是的值 ，作为动态组件中的is属性所用，所以它的值只能是components配置中的属性
cmp: 'b1',
title:"爱"
)
</script>
</body>
</html>
删除线格式
以上是关于自定义动态组件，剩下的三种周期函数的主要内容，如果未能解决你的问题，请参考以下文章