vue 高级特性 动态组件

动态组件用法

<component :is="组件的名字"></component>

动态组件使用的场景：根据不同的数据，来渲染不同的组件

1.动态组件基本使用：引入，定义（这里需要特别注意）， 注册， 使用缺一不可！！

<template>
  <!-- rights组件 -->
  <div class="header">
    // 使用动态组件
    <component :is="componentInp"></component>
  </div>
</template>

<script type="text/ecmascript-6">
// 引入
import Inp from './inp'
export default {
  data() {
    return {
      // 定义
      componentInp: 'Inp',
    }
  },
  components: {
// 注册
    Inp,
  }
}
</script>

<template>
  <!-- inp组件 -->
  <div>
    this is inp
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: {
        title: 'inp title',
        city: '重庆'
      }
    }
  },
}
</script>

2.动态组件使用场景：根据不同的数据，来渲染组件

<template>
  <!-- rights组件 -->
  <div>
    <div v-for="(val, key) in newDate" :key="key">
      <component :is="val.type"></component>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import a1 from '../user/A'
import b1 from '../user/B'
export default {
  data() {
    return {
      newDate:{1:{
        type: a1 // 这里类似定义组件
      },
      2:{
        type: b1
      },
    }
    }
  },
  // 无需注册组件
  components: {

  }
}
</script>

<style lang="scss" scoped></style>

 A和B 组件结构一致

<template>
  <div>
    a组件
  </div>
  
</template>

<script>
export default {
  data() {
    return {
    }
  },
 
}
</script>

<style>

</style>

3.动态组件使用场景

v-once：第一次渲染就会放在内存中，不会被销毁，主要用于静态数据

父组件home

<template>
    <div>
        <h1>home组件</h1>
        <p>动态组件及v-once</p>
        <!-- <child1 v-if="type==='child1'"></child1>
        <child2 v-if="type==='child2'"></child2> -->
        <component :is="type"></component>
        <button @click="change">切换</button>
    </div>
  
</template>

<script>
import child1 from './Child1'
import child2 from './Child2'
export default {
    data() {
        return {
          type: 'child1'  
        }
    },
    components: {
        child1,
        child2
    },
    methods: {
        change() {
            this.type = this.type ==='child1' ? 'child2' : 'child1'
        }
    }
}
</script>

子组件child1和child2

<template>
    <div v-once>
        child1组件
    </div>
</template>

<template>
    <div v-once>
        child2组件
    </div>
</template>