热搜： Python PHP vue dedecms MySQL

vue学习记录之动态组件浅析

发布时间：2022-12-24 20:08:07 来源：网络

.

如果这世上真有奇迹，那只是努力的另一个名字。人生从来没有真正的绝境。无论遭受多少艰辛，无论经历多少苦难，只要一个人的心中还怀着一粒信念的种子，那么总有一天，他就能走出困境，让生命重新开花结果。

动态组件

释义：运行时在组件之间动态切换的方法。可以将多个条件组件（使用v-if、v-else-if、v-else切换的组件）简化为一行代码

看个例子 一般来讲，我们会这样实现一个tabs的切换

<template>
  <div id="app">
    <button v-for="item in tabs" :key="item" @click="onClickTabs(item)">{{item}}</button>
    <Buy v-if="index==='Buy'"/>
    <cutUp v-else-if="index==='cutUp'"/>
    <Fried v-else/>
  </div>
</template>

<script>
import Buy from "./components/Buy.vue";
import cutUp from "./components/cutUp.vue";
import Fried  from "./components/Fried.vue";

export default {
  name: "app",
  components: {
    Buy,
    cutUp,
    Fried,
  },
  created() {},
  data() {
    return {
      tabs: ["Buy", "cutUp", "Fried"],
      index:'Buy'
    };
  },
  methods: {
    onClickTabs(item){

      console.log(item,9999);
      this.index=item
    }
  },
};
</script>
<style lang="scss" scoped>
</style>

而动态组件形式则可以写成

<template>
  <div id="app">
    <button v-for="item in tabs" :key="item" @click="onClickTabs(item)">{{item}}</button>
    <component :is="index"></component>
  </div>
</template>

<script>
import Buy from "./components/Buy.vue";
import cutUp from "./components/cutUp.vue";
import Fried  from "./components/Fried.vue";

export default {
  name: "app",
  components: {
    Buy,
    cutUp,
    Fried,
  },
  created() {},
  data() {
    return {
      tabs: ["Buy", "cutUp", "Fried"],
      index:'Buy'
    };
  },

  methods: {
    onClickTabs(item){
      console.log(item,9999);
      this.index=item
    }
  },
};
</script>
<style lang="scss" scoped>
</style>

在以上例子中，v-if加组件名被components 加is替换掉了。至于其他，则没太多分别。该传data传data，该传状态传状态。

补充：动态调用组件示例

<div id="app">
<button @click="changeComponent('coma')">coma</button>
<button @click="changeComponent('comb')">comb</button>
<button @click="changeComponent('comc')">comc</button>
 
<component :is="com_name"></component>
</div>
 
<script>
var coma = {
template: '<div>aaaa</div>'
}
var comb = {
template: '<div>bbbb</div>'
}
var comc = {
template: '<div>cccc</div>'
}
let vm = new Vue({
el: '#app',
data: {
com_name: 'coma'
},
components: {
coma: coma,
comb: comb,
comc: comc,
},
methods: {
changeComponent: function(name) {
this.com_name = name
}
}
})
</script>