组件标签

发表于 | 分类于 | 评论数：

组件标签就是<component></component>,是vue自己定义的，可以用这个实现动态选择组件，详情看下面的小栗子

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
37
38
39
40
41
<body>
   <div id="app">
      <component :is="ok"></component>
      <!-- vue中用v-bind:is实现动态组件 -->
      <button @click="changeComponent">changeComponent</button>
   </div>
   <script>
      var componentA = {
          template:`<h2 style="color:red">A</h2>`
      }
      var componentB = {
          template:`<h2 style="color:green">B</h2>`
      }
      var componentC= {
          template:`<h2 style="color:pink">C</h2>`
      }
      var app = new Vue({
          el:'#app',
          data:{
              ok:'componentA'
          },
          components:{
              'componentA':componentA,
              'componentB':componentB,
              'componentC':componentC
          },
          methods:{
            changeComponent:function(){
                if(this.ok==componentA){
                    this.ok=componentB
                }
                else if(this.ok==componentB){
                    this.ok=componentC
                }
                else this.ok = componentA
            }
          }

      })
   </script>
</body>
-------------本文结束感谢您的阅读-------------