VUE多個元件示例
阿新 • • 發佈:2020-07-28
VUE多個元件示例
示例一
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多個元件示例</title> </head> <body> <div id="app"> <app-header></app-header> <app-main></app-main> <app-footer></app-footer> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script> Vue.component('app-header', { template: `<div class="header"><h1>頭部元件</h1></div>`, }) Vue.component('app-main', { template: `<div class="main"> <ul> <li>使用者管理</li> <li>賬單管理</li> <li>供應商管理</li> </ul> </div>`, }) Vue.component('app-footer', { template: `<div class="footer"><h1>底部元件</h1></div>`, }) // 定義區域性元件物件 const ComponentB = { template: '<div>這是 {{name}} </div>', data() { return { name: '區域性元件' } }, } new Vue({ el: '#app', components: { // key:value ; key為元件名,value是元件物件。 'component-b': ComponentB }, data: { } }) </script> </body> </html>
示例二
將每個元件存放進單獨的 js 檔案中去。
在html檔案同級建立一個component資料夾,建立三個js檔案,分別為Header.js、Main.js、Footer.js,並且將建立的元件分別放入對應的檔案中。
Header.js
Vue.component('app-header', {
template: `<div class="header"><h1>頭部元件</h1></div>`,
})
Main.js
Vue.component('app-main', { template: `<div class="main"> <ul> <li>使用者管理</li> <li>賬單管理</li> <li>供應商管理</li> </ul> </div>`, })
Footer.js
Vue.component('app-footer', {
template: `<div class="footer"><h1>底部元件</h1></div>`,
})
父元件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多個元件示例</title> </head> <body> <div id="app"> <app-header></app-header> <app-main></app-main> <app-footer></app-footer> </div> <script src="./node_modules/vue/dist/vue.js"></script> <script src="component/Header.js"></script> <script src="component/Main.js"></script> <script src="component/Footer.js"></script> <script> // 定義區域性元件物件 const ComponentB = { template: '<div>這是 {{name}} </div>', data() { return { name: '區域性元件' } }, } new Vue({ el: '#app', components: { // key:value ; key為元件名,value是元件物件。 'component-b': ComponentB }, data: { } }) </script> </body> </html>