东莞网站设计制作,湖南建筑信息网,法律网站模板,做网站的框架1. 什么是动态组件
动态组件指的是 动态切换组件的显示与隐藏
2. 如何实现动态组件渲染
vue提供了一个内置的component组件#xff0c;专门用来实现动态组件的渲染。
作用#xff1a;组件的占位符is的值表示要渲染的组件
示例代码如下#xff1a;
Left.vue的代…1. 什么是动态组件
动态组件指的是 动态切换组件的显示与隐藏
2. 如何实现动态组件渲染
vue提供了一个内置的component组件专门用来实现动态组件的渲染。
作用组件的占位符is的值表示要渲染的组件
示例代码如下
Left.vue的代码
templatediv classbox这是左边的组件/div
/templatescript
export default {name: Left,
};
/scriptstyle langless scoped
.box {background-color: pink;border: 1px solid;height: 400px;width: 400px;color: white;
}
/styleRight.vue的代码
templatediv classbox这是右边的组件/div
/templatescript
export default {name: Right,
};
/scriptstyle langless scoped
.box {background-color: blue;border: 1px solid;height: 400px;width: 400px;color: white;
}
/styleApp.vue的代码
templatediv idappdiv classcontentcomponent :isname/component/divh1这是一个App组件/h1button clickname Left显示Left/buttonbutton clickname Right显示Right/button/div
/templatescript
import Left from /components/Left;
import Right from /components/Right;
export default {name: App,components: {Left,Right,},data() {return {name: Left,};},
};
/script
style langless
.content {display: flex;
}
/style3.keep-alive的使用
使用keep-alive可以保持状态组件创建后不会被销毁
那怕被隐藏了也不会被销毁。 使用keep-alive来保持状态 语法 keep-alive组件名/组件名
/keep-alvieLeft.vue的代码
templatediv classboxh3这是左边的组件{{ count }}/h3button clickcount1/button/div
/templatescript
export default {name: Left,data() {return {count: 0,};},created() {console.log(Left组件被创建了);},destroyed() {console.log(Left组件被销毁了);},
};
/scriptstyle langless scoped
.box {background-color: pink;border: 1px solid;height: 400px;width: 400px;color: white;
}
/styleRight.vue的代码
templatediv classbox这是右边的组件/div
/templatescript
export default {name: Right,
};
/scriptstyle langless scoped
.box {background-color: blue;border: 1px solid;height: 400px;width: 400px;color: white;
}
/styleApp.vue的代码
templatediv idappdiv classcontentkeep-alivecomponent :isname/component/keep-alive/divh1这是一个App组件/h1button clickname Left显示Left/buttonbutton clickname Right显示Right/button/div
/templatescript
import Left from /components/Left;
import Right from /components/Right;
export default {name: App,components: {Left,Right,},data() {return {name: Left,};},
};
/script
style langless
.content {display: flex;
}
/style实现效果
如下显示右边的组件的时候但其实左边的组件被销毁只是状态变为了 inactive,Left组件被缓存了缓存到了内存中。 3.1 keep-alive 对应的生命周期函数
当组件被缓存的时候会自动触发 deactivated生命周期函数当组件被激活的时候会自动触发activited 生命周期函数
当组件第一次被激活的时候既会执行 created生命周期函数又会执行 activited生命周期函数只有给组件用keep-alive标签包裹的时候deactivited生命周期函数和activited函数才会被创建
3.2 keep-alive的相关属性
3.2.1 include属性哪些组件需要被缓存
因为没有指定哪个组件被缓存哪个组件不缓存所以默认被keep-alive包裹的所有组件都会被缓存。
include属性用来指定只有名称匹配的组件会被缓存。多个组件名之间 使用英文 逗号 分隔。
匹配首先会检查 组件自身的 name 属性如果 name 属性 不可用。则匹配它局部注册名称也就是父组件的 components选项的键值。匿名的组件不能被匹配 这里指的组件本身name属性是否可用指的是 组件的name属性是否被指定了值如果指定了值但与之不匹配的话不会去父组件的componenst查看键值。
例如现在有一个需求Left组件要求被缓存Right组件不要求被缓存 3.2.2 exclude属性哪些组件不需要被缓存
exclude属性和include属性不能同时使用只能用一个只有名称匹配的组件才不会被缓存多个组件名之间用 英文逗号 隔开匹配的规则和 include属性一致先匹配组件本身的name属性如果不可用会匹配 局部组件名称即是 components的键值对
需求Right组件不希望被缓存 4. 组件注册名称和组件声明名称的区别
如果在 声明组件 的时候 没有为组件指定 name 名称则组件的名称默认 就是 注册时候的名称 控制台查看 如果在声明的时候指定name的值则组件的名称就是 name的值 控制台查看 组件的 注册名称应用场景是 以标签的形式把注册好的组件渲染和使用到页面结构之中。组件的 声明名称应用场景结合 keep-alive标签实现缓存功能以及在调试工具中看到的组件 name 名称
5. 总结
