1回答

Sam

2019-11-25

已采纳

你好，这里主要演示 component 的动态组件特性，在这个场景下动态组件和 v-if 做一个判断差别不大，但是试想这样一个场景：

我需要根据一个参数判断展示 a 标签还是 router-link 标签时，你会如何实现呢（两者传入的参数几乎一样），这是用动态组件就可以节约大量代码，实现如下，首先定义动态组件：

<component v-bind="linkProps(to)">  
  <slot />
</component>

定义动态组件绑定的参数：

linkProps(url) {
  if (isExternal(url)) {
    return {
      is: 'a',
      href: url,
      target: '_blank',
      rel: 'noopener'
    }
  }
  return {
    is: 'router-link',
    to: url
  }
}

这样做的好处是可以让代码逻辑更加精炼，同时避免在 DOM 中暴露判断逻辑，如果存在更多组件切换时，动态组件也可以游刃有余

1

1

码代码

谢谢老师

2019-11-25

共1条回复