前端組件化 · VUE

## 頁面組件化就是把一個整體的頁面,切割成一個一個的部分.一個部分就稱作一個組件.合理的拆分組件,可以把一個大型的項目拆分成小份,和拼積木一樣. ## 不使用組件化的todolist ``` <div id="app"> <input type="text" v-model="inputValue"> <input type="button" value="提交" @click="submit"> <ul> <li v-for="value of lists">{{value}}</li> </ul> </div> <script> var vm = new Vue({ el: '#app', data: { lists: ['第一課的內容', '第二課的內容'], inputValue: '' }, methods: { submit() { if (this.inputValue === '') { return; } this.lists.push(this.inputValue); this.inputValue = ''; } } }) ``` ## 全局組件 ``` <div id="app"> <input type="text" v-model="inputValue"> <input type="button" value="提交" @click="submit"> <ul> <todo-item v-bind:content="item" v-for="item of lists"></todo-item> //通過v-bind父組件向子組件傳值 </ul> </div> <script> //全局的組件 Vue.component('TodoItem', { props: ['content'], template: '<li>{{this.content}}</li>', }); var vm = new Vue({ el: '#app', data: { lists: ['第一課的內容', '第二課的內容'], inputValue: '' }, methods: { submit() { if (this.inputValue === '') { return; } this.lists.push(this.inputValue); this.inputValue = ''; } } }) </script> ``` ## 局部的組件 ``` <div id="app"> <input type="text" v-model="inputValue"> <input type="button" value="提交" @click="submit"> <ul> <todo-item v-bind:content="item" v-for="item of lists"></todo-item> </ul> </div> <script> var TodoItem = { props:['content'], template: '<li>{{this.content}}</li>', }; var vm = new Vue({ el: '#app', components:{ TodoItem:TodoItem, //注冊要vue實例中 }, data: { lists: ['第一課的內容', '第二課的內容'], inputValue: '' }, methods: { submit() { if (this.inputValue === '') { return; } this.lists.push(this.inputValue); this.inputValue = ''; } } }) </script> ``` ## 子組件向父組件傳值 ``` <div id="app"> <input type="text" v-model="inputValue"> <input type="button" value="提交" @click="submit"> <ul> <todo-item v-bind:content="item" v-bind:index="index" v-for="item,index of lists" @delete="handleItemDelete"></todo-item> </ul> </div> <script> var TodoItem = { props: ['content', 'index'], template: '<li @click="handleItemClick">{{this.content}}</li>', methods: { handleItemClick() { this.$emit('delete', this.index); //子組件向外粗發一個delete的事件 } } }; var vm = new Vue({ el: '#app', components: { TodoItem: TodoItem, //注冊要vue實例中 }, data: { lists: ['第一的內容', '第二的內容'], inputValue: '' }, methods: { submit() { if (this.inputValue === '') { return; } this.lists.push(this.inputValue); this.inputValue = ''; }, handleItemDelete(index) { this.lists.splice(index, 1); } } }) </script> ```