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

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()