2022/9/2 动态组件，插槽初识(v-slot)指定渲染

最新推荐文章于 2023-08-04 14:00:04 发布

夕阳下的春日部男孩

最新推荐文章于 2023-08-04 14:00:04 发布

阅读量408

点赞数

本文链接：https://blog.csdn.net/weixin_54534229/article/details/126664361

版权

本文介绍了Vue中的动态组件<component>的使用，包括通过is属性按需渲染组件。同时讲解了keep-alive的用法，如如何保持组件状态不被销毁，以及activated和deactivated生命周期。另外，还探讨了插槽[slot]的概念，如何利用v-slot进行内容分发，并展示了v-slot的简写形式。

摘要由CSDN通过智能技术生成

<component>组件，专门用来渲染动态组件的渲染

语法:<component is="Left"></component>

按需展示功能

<template>
  <div class="app-container">
    <h1>App 根组件</h1>
    <button @click="comName='Left'">展示Left</button>
    <button @click="comName='Right'">展示Right</button>
    <hr />
    <div class="box">
      <!-- 渲染 Left 组件和 Right 组件 -->
       <component :is="comName"></component>
    </div>
  </div>
</template>

<script>
import Left from './components/Left.vue'
import Right from './components/Right.vue'
export default {
  data(){
    return {
      //表要展示组件名字
      comName : 'left'
    }
  },
components : {Left,Right}
}
</script>

<style lang="les