vue组件name使用 /动态组件 /组件缓存

vue组件name使用

可以用组件的name属性值，来注册组件名字

我们封装的组件，可以自己定义name属性组件名 让使用者有个统一的前缀风格

components/MyCom.vue

<template>
  <div>我是一个Com组件</div>
</template>

<script>
export default {
  name: 'ComNameHaHa',   //注册时可以定义自己的名字
}
</script>

<style scoped></style>

App.vue中注册和使用

<template>
  <div>
    <ComNameHaHa></ComNameHaHa>
    <MyProducts></MyProducts>
  </div>
</template>

<script>
import Com from './components/MyCom.vue'
import Pro from './components/MyProduct.vue'
export default {
  components: {
    [Pro.name]: Pro,
    [Com.name]: Com, //对象里的key是变量的话  []  属性名表达式
    // 相当于
    // ComNameHaHa: Com,
  },
}
</script>

动态组件

多个组件使用一个挂载点，并动态切换，就是动态组件

<