Vue的元件化應用構建與使用
阿新 • • 發佈：2021-07-21
元件化應用構建
元件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可複用的元件構建大型應用。仔細想想，幾乎任意型別的應用介面都可以抽象為一個元件樹：
在 Vue 裡，一個元件本質上是一個擁有預定義選項的一個 Vue 例項。在 Vue 中註冊元件很簡單：
1）模板：
// 定義名為 todo-item 的新元件 Vue.component('todo-item', { template: '<li>這是個待辦項</li>' }) var app = new Vue(...)
2）例項（專業課類別）：
<!-- 定義一個Vue元件Component--> Vue.component("lzp",{ props: ["major"], template: '<li>{{major}}</li>' }); let vue = new Vue({ el: "#app", data: { majors: ["Java", "Linux", "前端"] } });
現在，我們可以使用 v-bind 指令將待辦項傳到迴圈輸出的每個元件中：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo06_Vue元件</title> <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script> </head> <body> <!-- view層 模板 --> <div id="app"> <lzp v-for="major in majors" v-bind:major="major"></lzp> </div> <script type="text/javascript"> <!-- 定義一個Vue元件Component --> Vue.component("lzp",{ props: ["major"], template: '<li>{{major}}</li>' }); let vue = new Vue({ el: "#app", data: { majors: ["Java", "Linux", "前端"] } }); </script> </body> </html>
前端頁面效果如下：
總結：
從前端頁面展示效果來看，我們此時已經將v-for迴圈遍歷出來的資料通過v-bind繫結一個major屬性，該屬性就是一個橋樑（連線父單元與子單元），Vue元件中恰好也聲明瞭該屬性，則該屬性的值就能被元件拿到，並渲染到已定義的模板中