Tabla de contenido
El ciclo de vida de los componentes dinámicos
1. Complementos
Los complementos a menudo se usan para agregar funcionalidad global a Vue. Los complementos de Vue.js deben exponer un método de instalación. El primer parámetro de este método es el constructor de Vue y el segundo parámetro es un objeto de opciones opcional.
Los complementos se utilizan a través del método global Vue.use().
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
</head>
<body>
<div id="app">
<!-- 使用插件中的过滤器 -->
{
{new Date().getTime() | fmtDate}}
<!-- 使用插件中定义的自定义指令 -->
<input type="text" v-focus>
</div>
<script>
// 1.定义一个插件
let myPlugin = {
// 插件暴露一个install方法 参数：Vue构造函数 option可选项
install(Vue,options){
// 1.1 定义全局资源 Vue.xxx
//定义一个 自定义指令
Vue.directive('focus',{
inserted(el){
el.focus()
}
});
//定义一个过滤器
Vue.filter('fmtDate', function(val){
return moment(val).format('YYYY-MM-DD')
});
//1.2 定义一个实例方法，定义在Vue的原型上 Vue.prototype.xxx
Vue.prototype.message = function(val){
console.log(val);
}
}
}
//2.使用插件
Vue.use(myPlugin)
new Vue({
el:"#app",
created(){
// 插件中在Vue原型上定义了一个方法message，因此这里可以使用message方法
this.message('请求成功！')
}
})
</script>
</body>
</html>
2. Componentes dinámicos
Los componentes dinámicos usan la etiqueta del componente y usan v-bind para vincular el atributo is en la etiqueta para cambiar dinámicamente los componentes:
<component :is="current"></component>Ejemplo:
haga clic en el botón correspondiente para cambiar el componente correspondiente:
<body>
<div id="app">
<button @click="current=myA">切换A组件</button>
<button @click="current=myB">切换B组件</button>
<component :is="current"></component>
</div>
<script>
// 定义组件myA
let myA = {
template:`
<div>我是A组件</div>
`
}
// 定义组件myB
let myB = {
template:`
<div>我是B组件</div>
`
}
new Vue({
el:"#app",
// 注册组件
components:{
'my-a': myA,
'my-b': myB
},
data:{
current: myA
}
})
</script>
</body>
mantener viva
De forma predeterminada, los componentes se vuelven a crear cuando se cambian, pero a veces queremos que las instancias de los componentes se almacenen en caché cuando se crean por primera vez. Para resolver este problema, podemos envolver sus componentes dinámicos con un elemento <keep-alive>.
<keep-alive>
<component :is="current"></component>
</keep-alive>El ciclo de vida de los componentes dinámicos
Se han agregado tres nuevos ciclos de vida a los componentes dinámicos:
activado: ingrese el componente de activación
desactivado: dejado desactivado
errorCaptured: se produjo un error de captura de error en el componente secundario/componente descendiente
Secuencia de activación:
creado-->errorCapturado-->montado-->activado-->desactivado
<body>
<div id="app">
<button @click="current=myA">切换A组件</button>
<button @click="current=myB">切换B组件</button>
<keep-alive>
<component :is="current"></component>
</keep-alive>
</div>
<script>
// 定义一个A的子组件,用来说明errorCaptured声明周期
let aChild={
template:`
<div>
A组件的子组件
{
{subMsg}}
</div>
`
};
// 定义组件myA
let myA = {
template:`
<div>我是A组件
<a-child></a-child>
</div>
`,
components:{
'a-child': aChild
},
created(){
alert('实例A初始化完成');
},
mounted(){
alert('实例A挂载到页面完成')
},
// 激活组件 进入组件就会触发的生命周期
activated() {
alert('进入A组件了')
},
// 捕获子组件/后代组件发生错误的生命周期
errorCaptured(){
alert('子组件发生错误了');
},
// 离开当前组件触发 停用组件
deactivated(){
alert('离开A组件了');
},
}
// 定义组件myB
let myB = {
template:`
<div>我是B组件</div>
`
}
new Vue({
el:"#app",
// 注册组件
components:{
'my-a': myA,
'my-b': myB
},
data:{
current: myA
}
})
</script>
</body>
Tres, mezclados
Los mixins proporcionan una forma muy flexible de distribuir la funcionalidad reutilizable en los componentes de Vue. Un objeto mixin puede contener opciones de componentes arbitrarias. Cuando un componente usa un mixin, todas las opciones del mixin se "mezclarán" en las propias opciones del componente.
mezclas globales
Vue.mixin()
No se recomienda usar el objeto de combinación de registro global, una vez que se usa la combinación global, afectará a todas las instancias de vue creadas en el futuro.
mezcla parcial
Use el elemento de configuración mixins mixins:[] en la instancia del componente
reglas de mezcla
Cuando los componentes y los mixins tienen opciones con el mismo nombre, esas opciones se fusionan adecuadamente:
1. Datos de datos:
Cuando el objeto de datos se mezcle, se fusionará y, cuando se produzca un conflicto, se conservarán los datos del componente.
2. El valor son los métodos del objeto, calculados, etc.:
Al mezclar, los métodos se fusionarán en un solo objeto. Si el nombre clave del objeto entra en conflicto, se conservará el par clave-valor del objeto componente.
3. Función de gancho de ciclo de vida:
Las funciones de enlace con el mismo nombre se fusionarán en una matriz y se llamarán secuencialmente, pero la función de enlace mezclada con el objeto se llamará primero
<body>
<div id="app">
{
{mixinMsg}}
{
{foo()}}
{
{bar()}}
</div>
<script>
// 定义一个混入对象
let myMixin = {
data(){
return{
mixinMsg: '我是混入对象的数据',
age: 18
}
},
created(){
console.log('我是混入的生命周期');
},
methods:{
foo(){
return this.age
},
bar(){
console.log('我是混入方法');
}
},
}
// 全局混入——>混入到所有组件实例
// Vue.mixin(myMixin);
new Vue({
// 局部混入
mixins: [myMixin],
el:"#app",
// 数据对象在混入时，会进行合并，发生冲突时，保留组件的数据
data:{
msg: '我是vue实例的数据模型',
age: 20
},
// 生命周期会合并并依次调用执行 混入的生命周期优先执行
created(){
console.log('我是组件的生命周期');
console.log(this.$data);
},
// 在混入时，methods会合并成为一个对象，如果对象的键名发生冲突，则保留组件对象的键值对
methods:{
bar(){
console.log('我是组件的方法');
}
}
})
</script>
</body> 