vu3 - 动态组件

之前我们用到一个组件的时候，在模板里写上组件的标签就可以使用了

 

?

1	<counter></counter>

 

这样，在页面上就会显示这个组件，这个组件是固定的
动态组件是不固定要显示哪个组件，只是有个component标签，表示在模板的相应位置有一个组件，
它具体显示哪个组件，要根据它的is属性来决定

 

?

1	<component :is="currentComponent"></component>

　

is绑定currentComponent是一个字符串，表示一个组件的名字，组件名字改变时，component标签这个位置显示的组件就会变化

还是用我们之前用过的两个组件做示例，表示两个不同的组件componentA和componentB，在点击按钮时，切换组件，

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<template>   <div>     <button @click="onClick">点击切换组件</button>     <component :is="currentComponent"></component>   </div> </template>   <script> // 动态组件 import componentA from './components/componentA.vue' import componentB from './components/componentB.vue' export default {   name: 'App',   components: {     // 声明要使用哪些组件     componentA,     componentB,   },   data() {     return {       currentComponent: 'componentA',     }   },   methods: {     onClick() {       if (this.currentComponent === 'componentA') {         this.currentComponent = 'componentB'       } else {         this.currentComponent = 'componentA'       }     },   }, } </script>   <style></style>

　　

来源:https://www.jianshu.com/p/392b03806968