vue3的动态组件是如何工作的

在这篇文章中,阿宝哥将介绍 Vue 3 中的内置组件 —— component,该组件的作用是渲染一个 “元组件” 为动态组件。如果你对动态组件还不了解的话也没关系,文中阿宝哥会通过具体的示例,来介绍动态组件的应用。由于动态组件内部与组件注册之间有一定的联系,所以为了让大家能够更好地了解动态组件的内部原理,阿宝哥会先介绍组件注册的相关知识。

一、组件注册

1.1 全局注册

在 Vue 3.0 中,通过使用 app 对象的 component 方法,可以很容易地注册或检索全局组件。component 方法支持两个参数:

  • name:组件名称;
  • component:组件定义对象。

接下来,我们来看一个简单的示例:

<div id="app">
 <component-a></component-a>
 <component-b></component-b>
 <component-c></component-c>
</div>
<script>
 const { createApp } = Vue
 const app = createApp({}); // ①
 app.component('component-a', { // ②
  template: "<p>我是组件A</p>"
 });
 app.component('component-b', {
  template: "<p>我是组件B</p>"
 });
 app.component('component-c', {
  template: "<p>我是组件C</p>"
 });
 app.mount('#app') // ③
</script>

在以上代码中,我们通过 app.component 方法注册了 3 个组件,这些组件都是全局注册的 。也就是说它们在注册之后可以用在任何新创建的组件实例的模板中。该示例的代码比较简单,主要包含 3 个步骤:创建 App 对象、注册全局组件和应用挂载。其中创建 App 对象的细节,阿宝哥会在后续的文章中单独介绍,下面我们将重点分析其他 2 个步骤,首先我们先来分析注册全局组件的过程。

1.2 注册全局组件的过程

在以上示例中,我们使用 app 对象的 component 方法来注册全局组件:

app.component('component-a', {
 template: "<p>我是组件A</p>"
});

当然,除了注册全局组件之外,我们也可以注册局部组件,因为组件中也接受一个 components 的选项:

const app = Vue.createApp({
 components: {
 'component-a': ComponentA,
 'component-b': ComponentB
 }
})

需要注意的是,局部注册的组件在其子组件中是不可用的。接下来,我们来继续介绍注册全局组件的过程。对于前面的示例来说,我们使用的 app.component 方法被定义在 runtime-core/src/apiCreateApp.ts 文件中:

export function createAppAPI<HostElement>(
 render: RootRenderFunction,
 hydrate?: RootHydrateFunction
): CreateAppFunction<HostElement> {
 return function createApp(rootComponent, rootProps = null) {
 const context = createAppContext()
 const installedPlugins = new Set()
 let isMounted = false

 const app: App = (context.app = {
  // 省略部分代码
  _context: context,

  // 注册或检索全局组件
  component(name: string, component?: Component): any {
  if (__DEV__) {
   validateComponentName(name, context.config)
  }
  if (!component) { // 获取name对应的组件
   return context.components[name]
  }
  if (__DEV__ && context.components[name]) { // 重复注册提示
   warn(`Component "${name}" has already been registered in target app.`)
  }
  context.components[name] = component // 注册全局组件
  return app
  },
 })

 return app
 }
}

当所有的组件都注册成功之后,它们会被保存到 context 对象的 components 属性中,具体如下图所示:

而 createAppContext 函数被定义在 runtime-core/src/apiCreateApp.ts 文件中:

// packages/runtime-core/src/apiCreateApp.ts
export function createAppContext(): AppContext {
 return {
 app: null as any,
 config: { // 应用的配置对象
  isNativeTag: NO,
  performance: false,
  globalProperties: {},
  optionMergeStrategies: {},
  isCustomElement: NO,
  errorHandler: undefined,
  warnHandler: undefined
 },
 mixins: [], // 保存应用内的混入
 components: {}, // 保存全局组件的信息
 directives: {}, // 保存全局指令的信息
 provides: Object.create(null)
 }
}

分析完 app.component 方法之后,是不是觉得组件注册的过程还是挺简单的。那么对于已注册的组件,何时会被使用呢?要回答这个问题,我们就需要分析另一个步骤 —— 应用挂载。

1.3 应用挂载的过程

为了更加直观地了解应用挂载的过程,阿宝哥利用 Chrome 开发者工具的 Performance 标签栏,记录了应用挂载的主要过程:

在上图中我们发现了一个与组件相关的函数 resolveComponent。很明显,该函数用于解析组件,且该函数在 render 方法中会被调用。在源码中,我们找到了该函数的定义:

// packages/runtime-core/src/helpers/resolveAssets.ts
const COMPONENTS = 'components'

export function resolveComponent(name: string): ConcreteComponent | string {
 return resolveAsset(COMPONENTS, name) || name
}

由以上代码可知,在 resolveComponent 函数内部,会继续调用 resolveAsset 函数来执行具体的解析操作。在分析 resolveAsset 函数的具体实现之前,我们在 resolveComponent 函数内部加个断点,来一睹 render 方法的 “芳容”:

在上图中,我们看到了解析组件的操作,比如 _resolveComponent("component-a")。前面我们已经知道在 resolveComponent 函数内部会继续调用 resolveAsset 函数,该函数的具体实现如下:

// packages/runtime-core/src/helpers/resolveAssets.ts
function resolveAsset(
 type: typeof COMPONENTS | typeof DIRECTIVES,
 name: string,
 warnMissing = true
) {
 const instance = currentRenderingInstance || currentInstance
 if (instance) {
 const Component = instance.type
 // 省略大部分处理逻辑
 const res =
  // 局部注册
  // check instance[type] first for components with mixin or extends.
  resolve(instance[type] || (Component as ComponentOptions)[type], name) ||
  // 全局注册
  resolve(instance.appContext[type], name)
 return res
 } else if (__DEV__) {
 warn(
  `resolve${capitalize(type.slice(0, -1))} ` +
  `can only be used in render() or setup().`
 )
 }
}

因为注册组件时,使用的是全局注册的方式,所以解析的过程会执行 resolve(instance.appContext[type], name) 该语句,其中 resolve 方法的定义如下:

// packages/runtime-core/src/helpers/resolveAssets.ts
function resolve(registry: Record<string, any> | undefined, name: string) {
 return (
 registry &&
 (registry[name] ||
  registry[camelize(name)] ||
  registry[capitalize(camelize(name))])
 )
}

分析完以上的处理流程,我们在解析全局注册的组件时,会通过 resolve 函数从应用的上下文对象中获取已注册的组件对象。

(function anonymous() {
 const _Vue = Vue

 return function render(_ctx, _cache) {
  with (_ctx) {
   const {resolveComponent: _resolveComponent, createVNode: _createVNode,
   Fragment: _Fragment, openBlock: _openBlock, createBlock: _createBlock} = _Vue

   const _component_component_a = _resolveComponent("component-a")
   const _component_component_b = _resolveComponent("component-b")
   const _component_component_c = _resolveComponent("component-c")

   return (_openBlock(),
   _createBlock(_Fragment, null, [
    _createVNode(_component_component_a),
    _createVNode(_component_component_b),
    _createVNode(_component_component_c)], 64))
  }
 }
})

在获取到组件之后,会通过 _createVNode 函数创建 VNode 节点。然而,关于 VNode 是如何被渲染成真实的 DOM 元素这个过程,阿宝哥就不继续往下介绍了,后续会写专门的文章来单独介绍这块的内容,接下来我们将介绍动态组件的相关内容。

二、动态组件

在 Vue 3 中为我们提供了一个 component 内置组件,该组件可以渲染一个 “元组件” 为动态组件。根据 is 的值,来决定哪个组件被渲染。如果 is 的值是一个字符串,它既可以是 HTML 标签名称也可以是组件名称。对应的使用示例如下:

<!-- 动态组件由 vm 实例的 `componentId` property 控制 -->
<component :is="componentId"></component>

<!-- 也能够渲染注册过的组件或 prop 传入的组件-->
<component :is="$options.components.child"></component>

<!-- 可以通过字符串引用组件 -->
<component :is="condition ? 'FooComponent' : 'BarComponent'"></component>

<!-- 可以用来渲染原生 HTML 元素 -->
<component :is="href ? 'a' : 'span'"></component>

2.1 绑定字符串类型

介绍完 component 内置组件,我们来举个简单的示例:

<div id="app">
 <button
  v-for="tab in tabs"
  :key="tab"
  @click="currentTab = 'tab-' + tab.toLowerCase()">
  {{ tab }}
 </button>
 <component :is="currentTab"></component>
</div>
<script>
 const { createApp } = Vue
 const tabs = ['Home', 'My']
 const app = createApp({
  data() {
  return {
   tabs,
   currentTab: 'tab-' + tabs[0].toLowerCase()
  }
  },
 });
 app.component('tab-home', {
  template: `<div style="border: 1px solid;">Home component</div>`
 })
 app.component('tab-my', {
  template: `<div style="border: 1px solid;">My component</div>`
 })
 app.mount('#app')
</script>

在以上代码中,我们通过 app.component 方法全局注册了 tab-home 和 tab-my 2 个组件。此外,在模板中,我们使用了 component 内置组件,该组件的 is 属性绑定了 data 对象的 currentTab 属性,该属性的类型是字符串。当用户点击 Tab 按钮时,会动态更新 currentTab 的值,从而实现动态切换组件的功能。以上示例成功运行后的结果如下图所示:

看到这里你会不会觉得 component 内置组件挺神奇的,感兴趣的小伙伴继续跟阿宝哥一起,来揭开它背后的秘密。下面我们利用 Vue 3 Template Explorer在线工具,看一下 <component :is="currentTab"></component> 模板编译的结果:

const _Vue = Vue

return function render(_ctx, _cache, $props, $setup, $data, $options) {
 with (_ctx) {
 const { resolveDynamicComponent: _resolveDynamicComponent, openBlock: _openBlock,
  createBlock: _createBlock } = _Vue
 return (_openBlock(), _createBlock(_resolveDynamicComponent(currentTab)))
 }
}

通过观察生成的渲染函数,我们发现了一个 resolveDynamicComponent 的函数,根据该函数的名称,我们可以知道它用于解析动态组件,它被定义在 runtime-core/src/helpers/resolveAssets.ts 文件中,具体实现如下所示:

// packages/runtime-core/src/helpers/resolveAssets.ts
export function resolveDynamicComponent(component: unknown): VNodeTypes {
 if (isString(component)) {
 return resolveAsset(COMPONENTS, component, false) || component
 } else {
 // invalid types will fallthrough to createVNode and raise warning
 return (component || NULL_DYNAMIC_COMPONENT) as any
 }
}

在 resolveDynamicComponent 函数内部,若 component 参数是字符串类型,则会调用前面介绍的 resolveAsset 方法来解析组件:

// packages/runtime-core/src/helpers/resolveAssets.ts
function resolveAsset(
 type: typeof COMPONENTS | typeof DIRECTIVES,
 name: string,
 warnMissing = true
) {
 const instance = currentRenderingInstance || currentInstance
 if (instance) {
 const Component = instance.type
 // 省略大部分处理逻辑
 const res =
  // 局部注册
  // check instance[type] first for components with mixin or extends.
  resolve(instance[type] || (Component as ComponentOptions)[type], name) ||
  // 全局注册
  resolve(instance.appContext[type], name)
 return res
 }
}

对于前面的示例来说,组件是全局注册的,所以解析过程中会从 app.context 上下文对象的 components 属性中获取对应的组件。当 currentTab 发生变化时,resolveAsset 函数就会返回不同的组件,从而实现动态组件的功能。此外,如果 resolveAsset 函数获取不到对应的组件,则会返回当前 component 参数的值。比如 resolveDynamicComponent('div') 将返回 'div' 字符串。

// packages/runtime-core/src/helpers/resolveAssets.ts
export const NULL_DYNAMIC_COMPONENT = Symbol()

export function resolveDynamicComponent(component: unknown): VNodeTypes {
 if (isString(component)) {
 return resolveAsset(COMPONENTS, component, false) || component
 } else {
 return (component || NULL_DYNAMIC_COMPONENT) as any
 }
}

细心的小伙伴可能也注意到了,在 resolveDynamicComponent 函数内部,如果 component 参数非字符串类型,则会返回 component || NULL_DYNAMIC_COMPONENT 这行语句的执行结果,其中 NULL_DYNAMIC_COMPONENT 的值是一个 Symbol 对象。

2.2 绑定对象类型

了解完上述的内容之后,我们来重新实现一下前面动态 Tab 的功能:

<div id="app">
 <button
  v-for="tab in tabs"
  :key="tab"
  @click="currentTab = tab">
  {{ tab.name }}
 </button>
 <component :is="currentTab.component"></component>
</div>
<script>
 const { createApp } = Vue
 const tabs = [
  {
  name: 'Home',
  component: {
   template: `<div style="border: 1px solid;">Home component</div>`
  }
  },
  {
  name: 'My',
  component: {
   template: `<div style="border: 1px solid;">My component</div>`
  }
 }]
 const app = createApp({
  data() {
  return {
   tabs,
   currentTab: tabs[0]
  }
  },
 });
 app.mount('#app')
</script>

在以上示例中,component 内置组件的 is 属性绑定了 currentTab 对象的 component 属性,该属性的值是一个对象。当用户点击 Tab 按钮时,会动态更新 currentTab 的值,导致 currentTab.component 的值也发生变化,从而实现动态切换组件的功能。需要注意的是,每次切换的时候,都会重新创建动态组件。但在某些场景下,你会希望保持这些组件的状态,以避免反复重渲染导致的性能问题。

对于这个问题,我们可以使用 Vue 3 的另一个内置组件 —— keep-alive,将动态组件包裹起来。比如:

<keep-alive>
 <component :is="currentTab"></component>
</keep-alive>

keep-alive 内置组件的主要作用是用于保留组件状态或避免重新渲染,使用它包裹动态组件时,会缓存不活动的组件实例,而不是销毁它们。关于 keep-alive 组件的内部工作原理,阿宝哥后面会写专门的文章来分析它,对它感兴趣的小伙伴记得关注 Vue 3.0 进阶 系列哟。

三、阿宝哥有话说

3.1 除了 component 内置组件外,还有哪些内置组件?

在 Vue 3 中除了本文介绍的 component 和 keep-alive 内置组件之外,还提供了 transition、transition-group 、slot 和 teleport 内置组件。

3.2 注册全局组件与局部组件有什么区别?

注册全局组件

const { createApp, h } = Vue
const app = createApp({});
app.component('component-a', {
 template: "<p>我是组件A</p>"
});

使用 app.component 方法注册的全局的组件,被保存到 app 应用对象的上下文对象中。而通过组件对象 components 属性注册的局部组件是保存在组件实例中。

注册局部组件

const { createApp, h } = Vue
const app = createApp({});
const componentA = () => h('div', '我是组件A');
app.component('component-b', {
 components: {
 'component-a': componentA
 },
 template: `<div>
 我是组件B,内部使用了组件A
 <component-a></component-a>
 </div>`
})

解析全局注册和局部注册的组件

// packages/runtime-core/src/helpers/resolveAssets.ts
function resolveAsset(
 type: typeof COMPONENTS | typeof DIRECTIVES,
 name: string,
 warnMissing = true
) {
 const instance = currentRenderingInstance || currentInstance
 if (instance) {
 const Component = instance.type
 // 省略大部分处理逻辑
 const res =
  // 局部注册
  // check instance[type] first for components with mixin or extends.
  resolve(instance[type] || (Component as ComponentOptions)[type], name) ||
  // 全局注册
  resolve(instance.appContext[type], name)
 return res
 }
}

3.3 动态组件能否绑定其他属性?

component 内置组件除了支持 is 绑定之外,也支持其他属性绑定和事件绑定:

<component :is="currentTab.component" :name="name" @click="sayHi"></component>

这里阿宝哥使用 Vue 3 Template Explorer这个在线工具,来编译上述的模板:

const _Vue = Vue
return function render(_ctx, _cache, $props, $setup, $data, $options) {
 with (_ctx) {
 const { resolveDynamicComponent: _resolveDynamicComponent,
  openBlock: _openBlock, createBlock: _createBlock } = _Vue

 return (_openBlock(), _createBlock(_resolveDynamicComponent(currentTab.component), {
  name: name,
  onClick: sayHi
 }, null, 8 /* PROPS */, ["name", "onClick"]))
 }
}

观察以上的渲染函数可知,除了 is 绑定会被转换为 _resolveDynamicComponent 函数调用之外,其他的属性绑定都会被正常解析为 props 对象。

以上就是vue3的动态组件是如何工作的的详细内容,更多关于vue3动态组件的资料请关注我们其它相关文章!

(0)

相关推荐

  • Vue动态组件和异步组件原理详解

    前言 在vue官方资料中,我们可以可以很学会如何通过vue构建"动态组件"以及"异步组件",然而,在官方资料中,并没有涉及到真正的"动态异步"组件,经过大量的时间研究和技术分析,我们给出目前比较合理的技术实现方式,并分析一下vue动态异步组件的原理 动态组件 & 异步组件的存在,使得我们更方便地控制首屏代码的体积,加快加载速度. 抛开具体细节不谈,一个普通 Vue 组件从创建到展现在页面里,主要经历了以下流程: // 组件 Object

  • vue 动态组件(component :is) 和 dom元素限制(is)用法说明

    一.is的使用 参考Vue 2.0教程,有讲到 is 的使用: 解析 DOM 模板时的注意事项 有些 HTML 元素,诸如 <ul>.<ol>.<table> 和 <select>,对于哪些元素可以出现在其内部是有严格限制的.而有些元素,诸如 <li>.<tr> 和 <option>,只能出现在其它某些特定的元素内部. 这会导致我们使用这些有约束条件的元素时遇到一些问题.例如: <table> <blog

  • vue 动态组件用法示例小结

    本文实例讲述了vue 动态组件用法.分享给大家供大家参考,具体如下: 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换.根据 v-bind:is="组件名" 中的组件名去自动匹配组件,如果匹配不到则不显示. 改变挂载的组件,只需要修改is指令的值即可. <!DOCTYPE html> <html> <head> <meta charset="utf-

  • Vue 自定义动态组件实例详解

    现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这些组件库满足不了我们的开发需求,这时候我们就需要自己写一个插件. 举第一个栗子 用vue-cli搭建好项目目录之后,在src/components下面新建一个文件夹放我们要写的插件,如图所示: index.vue里写我们的组件,代码如下: index.js里面写index.vue的install方法,并用Vue.component注册组件,代码如下: 接下来我们要在默认的main.js里将刚刚写的index.js

  • 深入了解Vue动态组件和异步组件

    1.动态组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #app { font-size: 0 } .dynamic-component-demo-tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: 1p

  • Vue两种组件类型:递归组件和动态组件的用法

    一递归组件 递归组件的特性就是可以在自己的template模板中调用自己本身.值得注意的它必须设置name属性. // 递归组件 recursive.vue <template> <div> <p>递归组件</p> <Recursion :count="count + 1" v-if="count < 3"></Recursion> </div> </template&g

  • Vue动态组件与异步组件实例详解

    本文实例讲述了Vue动态组件与异步组件.分享给大家供大家参考,具体如下: 1 在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabComponent"></component> 当在这些组件之间切换的时候,你有时会想保持这些组件的状态,以避免反复重渲染导致的性能问题.例如我们来展开说一说这个多标签界面: 你会注意到,如果你选择了一篇文章,切换到

  • Vue 动态组件components和v-once指令的实现

    一.实现两个组件间互相展示.互相隐藏 <!DOCTYPE html> <html> <head> <title>动态组件</title> <script type="text/javascript" src="./vue-dev.js"></script> </head> <body> <div id="app"> <ch

  • VUE 动态组件的应用案例分析

    本文实例讲述了VUE 动态组件的应用.分享给大家供大家参考,具体如下: 业务场景 我们在开发表单的过程中会遇到这样的问题,我们选择一个控件进行配置,控件有很多中类型,比如文本框,下来框等,这些配置都不同,因此需要不同的配置组件来实现. 较常规的方法是使用v-if 来实现,这样界面看上去比较复杂,而且需要进行修改主页面. 解决方案 可以使用动态组件来实现,为了体现动态组件的特性,我们简化实现方式,编写两个简单的组件来测试一下这个功能. 文本组件配置: <template> <div>

  • vue3的动态组件是如何工作的

    在这篇文章中,阿宝哥将介绍 Vue 3 中的内置组件 -- component,该组件的作用是渲染一个 "元组件" 为动态组件.如果你对动态组件还不了解的话也没关系,文中阿宝哥会通过具体的示例,来介绍动态组件的应用.由于动态组件内部与组件注册之间有一定的联系,所以为了让大家能够更好地了解动态组件的内部原理,阿宝哥会先介绍组件注册的相关知识. 一.组件注册 1.1 全局注册 在 Vue 3.0 中,通过使用 app 对象的 component 方法,可以很容易地注册或检索全局组件.com

  • 浅谈Vue3中key的作用和工作原理

    这个key属性有什么作用呢?我们先来看一下官方的解释: kekey属性主要用在Vue的虚拟DOM diff算法中,在新旧nodes对比时辨识Vnodes: 如果不使用key,Vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法 而使用 key 时,它会基于 key 的变化重新排列元素顺序,并且会移除/销毁 key 不存在的元素. 先简单提一下我对VNode的理解: VNode的全称是Virtual Node,也就是虚拟节点: Vnode的本质是一个JavaScri

  • vue3中单文件组件<script setup>实例详解

    目录 一.相比普通script语法的优势 二.基本语法 三.响应式 四.使用组件 五.使用自定义指令 六.defineProps 和 defineEmits 七.defineExpose 八.useSlots 和 useAttrs 九.顶层 await 附:<script setup>和 <script>之间的主要区别 总结 一.相比普通script语法的优势 <script setup>是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖.相比于普通的 &l

  • Vue.js的动态组件模板的实现

    组件并不总是具有相同的结构.有时需要管理许多不同的状态.异步执行此操作会很有帮助. 实例: 组件模板某些网页中用于多个位置,例如通知,注释和附件.让我们来一起看一下评论,看一下我表达的意思是什么. 评论现在不再仅仅是简单的文本字段.您希望能够发布链接,上传图像,集成视频等等.必须在此注释中呈现所有这些完全不同的元素.如果你试图在一个组件内执行此操作,它很快就会变得非常混乱. 处理方式 我们该如何处理这个问题?可能大多数人会先检查所有情况,然后在此之后加载特定组件.像这样的东西: <templat

  • vue3.0公共组件自动导入的方法实例

    一.前提 我们使用的是require.context方法导入,在vite创建的项目内使用会报错"require not found",所以必须用webpack创建项目.或者有大能可以说说vite怎么解决这个问题. 二.规则 我使用的注册规则是,搜索src/components/路径下的所有目录和子目录,搜索文件名叫做"index.vue"的文件,使用上级目录的名字作为组件名,进行注册.结构如下: 只注册index.vue,其他名字的组件不注册, 三.注册 由于vue

  • vue3单文件组件中style特性的深入讲解

    目录 style scoped style module 状态驱动的动态css 总结 style scoped 需要注意的有: 样式不会影响到其他组件,只会在当前组件生效. 子组件的根元素会同时 受父组件的作用域样式,和子组件的作用域样式影响. 这样做的目的是让父组件可以调整子组件的布局. 存在3个特殊的选择器: 1. 深度选择器:可以影响到子组件. 使用伪类 => :deep(cls: 影响的选择器) .a :deep(.b) { ... } 2. 插槽选择器: 可以影响到插槽内容的样式.使用

  • vue3 vite异步组件及路由懒加载实战示例

    目录 引言 一.前言 1-1.三点变化: 1-2.引入辅助函数defineAsyncComponent的原因: 二.Vue 2.x与Vue 3.x定义比较 2-1.异步组件/路由定义比较 2-2.声明方式比较 2-3.异步组件加载函数返回比较 三.Vue3实践 3-1.路由懒加载实现 3-2.异步组件实现 四.总结 引言 在 Vue2 中,异步组件和路由懒加载处理使用 import 就可以很轻松实现.但是在Vue 3.x 中异步组件的使用与 Vue 2.x 完全不同了.本文就详细讲讲vue3中异

  • vue3与ts组件封装提高代码复用性

    目录 引言 轮播图组件的封装 在pinia中发请求拿到数据 父组件中 在子组件中 引言 对于一名前端程序员来说封装组件是一个必备技能.当我们在日常的工作中总有所用的组件库满足不了需求的情况,这就需要我们有封装组件的基本功了. 封装组件,可以提高我们代码的复用性,提高工作效率,提高代码的可阅读性. 组件我自己的理解的话,分为两种吧,一种是工具类的组件,一种是页面级别的组件,工具类的组件就是说封装后,在以后的项目中如果用相同的应用场景时,可复用.页面类组件的话就是将一个大的页面分成很多的小组件,然后

  • 详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)

    在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使用的是动态组件实现,如果是在大型应用上,可能使用 vue-router 会方便一些. 先看下最终实现的效果,结构比较简单,顶部的三个 Tab 标签用于切换,内容区域分别为三个子组件. 效果预览 关键代码及分析如下: <template> // 每一个 tab 绑定了一个点击事件,传入的参数对应着

随机推荐