Vue.js 18 - 組件元件(Component) - iT 邦幫忙 | vue component example
使用組件有三個步驟宣告建構子(Constructor)註冊組件(RegistComponent)2.5建立組件(CreateComponent)掛載組件(MountComponent)前兩項已經介紹過,也可以簡化成一個步驟。介紹最後一項-組件掛載(mount)。先複習一下,透過模板(template)的基本掛載法:
使用組件有三個步驟
宣告建構子(Constructor) 註冊組件(Regist Component)2.5 建立組件(Create Component) 掛載組件(Mount Component)前兩項已經介紹過,也可以簡化成一個步驟。
<script> Vue.component(example, require(./components/Example.vue)); var app = new Vue({ el: #app }); </script>介紹最後一項 - 組件掛載(mount)。先複習一下,透過模板(template)的基本掛載法:
<div id="app"> <!-- Instance 掛載兩個 example 組件 --> <example id="1"></example> <example id="2"></example> </div>真實情況可能不只一種組件,需要依照情況掛載
<script> Vue.component(viewer, require(./components/Example.vue)); Vue.component(editor, require(./components/Editor.vue)); var app = new Vue({ el: #app, data: { state: viewer }, methods: { toggle: function() { return (this.state === viewer) ? editor : viewer; } } }); </script>透過is屬性動態掛載,按當時情境決定,絕對實用。
<div id="app"> <button type="bu...