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> ~~~