組件（Component）是 Vue.js 最強大的功能之一。
組件可以擴展 HTML 元素，封裝可重用的代碼。
組件系統讓我們可以用獨立可復用的小組件來構建大型應用，幾乎任意類型的應用的界面都可以抽象為一個組件樹：
案例：
使用到的vue名詞：v-for,component,template,props，v-bind
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>component</title> </head> <body> <!--view層 模板--> <div id="app"> <!-- 組件：傳遞給組件中的值：props--> {{message}} <abc v-for="item in foods" v-bind:arrt="item"></abc> </div> <!--導入vue.js--> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> // 定義一個vue組件component Vue.component("abc",{ props: ['arrt'], template: '<li>{{arrt}}</li>' }); var app=new Vue({ el: "#app", data: { message: "組件測試：", foods: ["西紅柿","西蘭花","生菜"] }, }) </script> </body> </html>