Vue基础篇之动态组件、处理边界情况、混入、渲染函数、插件、作用域插槽

文章目录

  • 1、动态组件 使用 `keep-alive`
    • 1.1、例子
      • 1.1.1、基础结构
      • 1.1.2、动态组件
  • 2、处理边界情况
  • 3、混入
  • 4、渲染函数
  • 5、Vue 插件功能
    • 5.1、使用插件
  • 6、作用域插槽

1、动态组件 使用 keep-alive

当在多个组件之间切换的时候，有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。
这个时候就可以使用 Keep-alive

1.1、例子

1.1.1、基础结构

  • PostsDem.vue
<template><div class="posts"><div class="left"><div v-for="(article, index) in articles" :key="article.id" @click="ind = index">{{article.title}}</div></div><div class="right"><!--v-show="ind === -1" 默认它为 -1--><div class="default" v-show="ind === -1">Click on a blog title to the left to view it.</div><div v-for="(article, index)  in articles" :key="article.id" v-show="ind === index"><h3>{{article.title}}</h3><div>{{article.content}}</div></div></div></div>
</template><script>
export default {data()