Loading... <!-- wp:heading --> <h2 id="vue动态组件">Vue动态组件</h2> <!-- /wp:heading --> <!-- wp:list {"ordered":true} --> <ol><li>什么是动态组件？</li></ol> <!-- /wp:list --> <!-- wp:paragraph --> <p>动态组件指的是动态切换组件的显示与隐藏。</p> <!-- /wp:paragraph --> <!-- wp:list {"ordered":true,"start":2} --> <ol start="2"><li>如何实现动态组件渲染</li></ol> <!-- /wp:list --> <!-- wp:paragraph --> <p>vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染。代码如下</p> <!-- /wp:paragraph --> <!-- wp:image {"id":564,"sizeSlug":"full","linkDestination":"none"} --> <figure class="wp-block-image size-full"><img src="https://www.xxhzm.cn/usr/uploads/2022/03/image-5.png" alt="" class="wp-image-564"style=""></figure> <!-- /wp:image --> <!-- wp:paragraph --> <p><comName>中定义组件名称，在<component>中使用:is绑定数据</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>:is的值表示要渲染组件的名字</p> <!-- /wp:paragraph --> <!-- wp:image {"id":567,"sizeSlug":"large","linkDestination":"none"} --> <figure class="wp-block-image size-large"><img src="https://www.xxhzm.cn/usr/uploads/2022/03/image-8-1024x496.png" alt="" class="wp-image-567"style=""></figure> <!-- /wp:image --> <!-- wp:paragraph --> <p>可以使用事件来切换需要显示的组件</p> <!-- /wp:paragraph --> <!-- wp:list {"ordered":true,"start":3} --> <ol start="3"><li>使用 keep-alive 保持状态</li></ol> <!-- /wp:list --> <!-- wp:paragraph --> <p>默认情况下，切换动态组件时无法保持组件的状态。可以使用keep-alive来保持组件的状态</p> <!-- /wp:paragraph --> <!-- wp:image {"id":569,"sizeSlug":"full","linkDestination":"none"} --> <figure class="wp-block-image size-full"><img src="https://www.xxhzm.cn/usr/uploads/2022/03/image-9.png" alt="" class="wp-image-569"style=""></figure> <!-- /wp:image --> <!-- wp:list {"ordered":true,"start":4} --> <ol start="4"><li>keep-alive 对应的生命周期函数</li></ol> <!-- /wp:list --> <!-- wp:paragraph --> <p>当组件被缓存时，会自动触发组件的 deactivated 生命周期函数。 </p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>当组件被激活时，会自动触发组件的 activated 生命周期函数。</p> <!-- /wp:paragraph --> <!-- wp:image {"id":570,"sizeSlug":"large","linkDestination":"none"} --> <figure class="wp-block-image size-large"><img src="https://www.xxhzm.cn/usr/uploads/2022/03/image-10-1024x191.png" alt="" class="wp-image-570"style=""></figure> <!-- /wp:image --> <!-- wp:paragraph --> <p>当组件第一次创建时会执行created生命周期函数，也会执行activated生命周期函数。</p> <!-- /wp:paragraph --> <!-- wp:paragraph --> <p>当组件被激活时会执行activated生命周期函数，但不会直接created生命周期函数，因为组件没有被创建。</p> <!-- /wp:paragraph --> <!-- wp:list {"ordered":true,"start":5,"textColor":"black"} --> <ol start="5" class="has-black-color has-text-color"><li>keep-alive 的 include 属性</li></ol> <!-- /wp:list --> <!-- wp:paragraph --> <p>可以include属性来指定需要对哪些组件进行缓存，多个组件用,隔开</p> <!-- /wp:paragraph --> <!-- wp:image {"id":573,"sizeSlug":"full","linkDestination":"none"} --> <figure class="wp-block-image size-full"><img src="https://www.xxhzm.cn/usr/uploads/2022/03/image-11.png" alt="" class="wp-image-573"style=""></figure> <!-- /wp:image --> <!-- wp:list {"ordered":true,"start":6} --> <ol start="6"><li>keep-alive 的 exclude 属性</li></ol> <!-- /wp:list --> <!-- wp:paragraph --> <p>exclude属性与include属性相反，可以设置让哪些组件不进行缓存。两者不可同时存在！</p> <!-- /wp:paragraph --> 猜你想看 go语言切片 每日一学：PHP 中的array_key_last函数详解 Linux安装Siege JavaScript计时器 Axios 实现登录拦截功能：完整代码、逻辑解析和性能优化建议 CSS3 Flex布局使用说明 HTML5、JS使用canvas绘画 主流博客系统搭建（WordPress、Typecho） - 保姆级教学 PHP字符串常用函数 nuxt3使用axios 最后修改：2022 年 06 月 05 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏
