vue中的组件

一、vue中定义组件模板的七种方式

参考文章：https://www.jianshu.com/p/7b7736303f63

1.字符串（‘’）

2.模版字符串（``）

3.内联模版（inline-template）

4.外联模板（text/x-template）

5.渲染函数（render（createElement））

6.jsx

7.单文件组件（性能高）

二、一些特殊功能的组件

1.动态组件

<component v-bind:is="currentTabComponent"></component>

利用is特性切换组件，组件切换时，原组件状态不会保留，可以利用内置组件<keep-alive>缓存组件状态

 

2.异步组件

利用工厂函数的方式定义组件，在特定条件下触发工厂函数，异步解析组件，结果会缓存下来，供以后从新渲染。

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

更多用法参考官方文档：https://cn.vuejs.org/v2/guide/components-dynamic-async.html

 

3.函数式组件

没有管理或者监听任何传递给他的状态，也没有生命周期方法，只是一个接收参数的函数，组件需要的一切都是通过上下文传递。这意味它是无状态 (没有响应式数据)，无实例 (没有 this 上下文)。

组册的时候加上functional：true的选项或者在单文件组件中的<template>上加上functional 。

在作为包装组件时它们也同样非常有用，比如，当需要做这些时：

• 程序化地在多个组件中选择一个
• 在将 children, props, data 传递给子组件之前操作它们。

4.内置组件

• component ：动态加载组件时使用
• transition ：用于vue中单个元素的或组件的过渡（只能有一个根元素，v-if/v-else除外）
• transition-group：列表过渡
• keep-alive：用于缓存失活的组件，可以设置缓存、不缓存哪些组件或者设置最大缓存数量
• slot：内容分发插槽