Component 标签 · web前端

[TOC] `<component></component>`标签是Vue框架自定义的标签，它的用途就是可以动态绑定我们的组件，根据数据的不同更换不同的组件 1. 我们先在构造器外部定义三个不同的组件，分别是componentA,componentB和componentC. ~~~ var componentA={ template:`<div>I'm componentA</div>` } var componentB={ template:`<div>I'm componentB</div>` } var componentC={ template:`<div>I'm componentC</div>` } ~~~ 2. 我们在构造器的components选项里加入这三个组件 ~~~ components:{ "componentA":componentA, "componentB":componentB, "componentC":componentC, } ~~~ 3. 我们在html里插入component标签，并绑定who数据，根据who的值不同，调用不同的组件 ~~~ <component v-bind:is="who"></component> ~~~ 完整代码 ~~~ <body> <div id="app"> <component v-bind:is="who"></component> <button @click="changeComponent">changeComponent</button> </div> </body> <script type="text/javascript"> var componentA = { template: `<div>I'm componentA</div>` }; var componentB = { template: `<div>I'm componentB</div>` }; var componentC = { template: `<div>I'm componentC</div>` }; var app = new Vue({ el: '#app', data: { who: 'componentA', }, components: { "componentA": componentA, "componentB": componentB, "componentC": componentC, }, methods: { changeComponent: function () { if (this.who == 'componentA') { this.who = 'componentB'; } else if (this.who == 'componentB') { this.who = 'componentC'; } else { this.who = 'componentA'; } } } }); </script> ~~~