关于前端:动态组件-Components

动静组件 Components

原文链接：https://note.noxussj.top/?source=sifo

根底案例

咱们先看一下非动静组件的写法，也就是咱们平时罕用的组件写法。

<template>    <div class="home">        <Component1 v-if="active === 'Component1'"></Component1>        <Component2 v-if="active === 'Component2'"></Component2>        <Component3 v-if="active === 'Component3'"></Component3>    </div></template><script>import Component1 from './Component1.vue'import Component2 from './Component2.vue'import Component3 from './Component3.vue'export default {    components: { Component1, Component2, Component3 },    data() {        return {            active: 'Component1'        }    }}</script>

代码中咱们引入了三个组件，并且都通过 active 进行判断展现不同的组件。这个是比拟常见的一个场景。当初遇到了一个问题，假如我有 50 个组件，那你是不是要用 v-if 判断 50 次。这样操作就会显得很繁琐。

接下来咱们应用动静组件进行代码革新。

<template>    <div class="home">        <component :is="active"></component>    </div></template><script>import Component1 from './Component1.vue'import Component2 from './Component2.vue'import Component3 from './Component3.vue'export default {    components: { Component1, Component2, Component3 },    data() {        return {            active: 'Component1'        }    }}</script>

只须要一行代码就能解决了。

动静组件

Vue 外部提供了一个全局组件，名称叫 component，次要用来进行动静渲染组件。它能够承受 is 参数，is 参数代表要渲染的组件名称。当你切换 is 属性时，整个组件是会进行从新渲染的，不会保留之前的组件状态。如果想要保留，则须要应用 keep-alive 组件进行包裹。

原文链接：https://note.noxussj.top/?source=sifo