Vue教程之动态组件

动态组件

通过 is 语法，我们可以根据组件的名称进行组件的切换。

实例演示

父组件

<template>
  <div>
    <component :is="test"></component>
    <button @click="handleClick">切换</button>
  </div>
</template>

<script>

import test1 from './components/test1'
import test2 from './components/test2'

export default {
  data () {
    return {
      test: 'test1'
    }
  },
  methods: {
    handleClick () {
      this.test = this.test === 'test1' ? 'test2' : 'test1'
    }
  },
  components: {
    test1,
    test2
  }
}
</script>

子组件 1

<template>
  <div>
    <h1>test1</h1>
  </div>
</template>

子组件 2

<template>
  <div>
    <h1>test2</h1>
  </div>
</template>

v-once

渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 v-once 属性以确保这些内容只计算一次然后缓存起来。

实例演示

<template>
  <div v-once>
    <h1>test1</h1>
  </div>
</template>

如果你使用 v-once 的话，需要注意不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的，再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉 v-once 或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。