this.$emit 的作用
this.$emit 的作用是觸發一個自定義事件，并將數據傳遞給父組件。父組件可以通過 v-on（或 @）監聽這個事件，并在事件觸發時執行相應的處理函數。
this.content 的作用
this.content 是子組件的 props，它從父組件接收數據。在你的代碼中，this.content 表示子組件當前的 content 值。當你調用 this.$emit(‘update’, this.content) 時，你實際上是將當前的 content 值傳遞給父組件。
監控事件的具體含義
在你的代碼中，update 事件的作用是通知父組件子組件的 content 值發生了變化。父組件可以在這個事件的處理函數中接收這個值，并根據需要進行處理
子組件
<script>let Message = Vue.extend({props: ['content'],template: `<div><h3>{{content}}</h3><button @click="updateContent">Update Content</button></div>`,methods: {updateContent: function () {// 觸發一個名為 'update' 的事件，并將當前的 content 值傳遞給父組件this.$emit('update', this.content);}}});Vue.component('message', Message);
</script>
父組件
<script>let vm = new Vue({el: "#container",data: {title: 'this is a title2',subTitle: 'this is a subtitle2'},methods: {gettitle() {// 調用子組件的 updateContent 方法this.$refs.title.updateContent();},updateTitle: function (content) {// 接收子組件傳遞的 content 值，并更新父組件的 title 數據console.log('title updated:', content);this.title = content;},updateSubTitle: function (content) {// 接收子組件傳遞的 content 值，并更新父組件的 subTitle 數據console.log('Sub-title updated:', content);this.subTitle = content;}}});
</script>
- 子組件觸發事件
在子組件中，updateContent 方法被調用時，會通過 this.$emit(‘update’, this.content) 觸發一個名為 update 的事件，并將當前的 content 值傳遞給父組件。
這里的 this.content 是子組件的 props，它從父組件接收數據。
- 父組件監聽事件
在父組件中，通過 v-on:update=“updateTitle” 和 v-on:update=“updateSubTitle” 監聽子組件觸發的 update 事件。
當子組件觸發 update 事件時，父組件的 updateTitle 或 updateSubTitle 方法會被調用，并接收子組件傳遞的 content 值。
父組件更新數據
在父組件的 updateTitle 和 updateSubTitle 方法中，接收子組件傳遞的 content 值，并更新父組件的 title 和 subTitle 數據。
由于 Vue 的響應式系統，更新父組件的數據會自動觸發子組件的更新。
- 總結
this.$emit(‘update’, this.content)：子組件觸發一個名為 update 的事件，并將當前的 content 值傳遞給父組件。
this.content：子組件的 props，表示子組件當前的 content 值。
父組件監聽事件：父組件通過 v-on:update 監聽子組件的 update 事件，并在事件處理函數中接收子組件傳遞的 content 值，更新父組件的數據。
通過這種方式，子組件可以通知父組件其 content 值發生了變化，父組件可以據此更新自己的數據，從而實現父子組件之間的數據同步。
在前端開發中，子組件通常用于封裝和復用具有特定功能的代碼塊，以提高代碼的可維護性和可復用性。子組件可以用于多種功能，以下是一些常見的使用場景
- 表單控件
子組件可以封裝各種表單控件，如輸入框、選擇框、日期選擇器等。這些控件可以獨立于父組件使用，方便在多個地方復用。
<template><div class="custom-input"><input:value="value"@input="$emit('input', $event.target.value)":placeholder="placeholder"/></div>
</template><script>
export default {props: {value: String,placeholder: String}
};
</script><style scoped>
.custom-input input {border: 1px solid #ccc;padding: 5px;border-radius: 4px;
}
</style>
- 數據展示
子組件可以用于展示數據，如列表、表格、卡片等。這些組件可以接收數據作為 props，并負責渲染和格式化這些數據。
<template><ul class="user-list"><li v-for="user in users" :key="user.id">{{ user.name }} - {{ user.email }}</li></ul>
</template><script>
export default {props: {users: Array}
};
</script><style scoped>
.user-list {list-style: none;padding: 0;
}
.user-list li {margin: 5px 0;
}
</style>
- 交互式組件
子組件可以封裝復雜的交互邏輯，如模態框、下拉菜單、工具提示等。這些組件可以獨立管理自己的狀態，并通過事件與父組件通信。
<template><div v-if="visible" class="modal"><div class="modal-content"><slot></slot><button @click="close">Close</button></div></div>
</template><script>
export default {props: {visible: Boolean},methods: {close() {this.$emit('update:visible', false);}}
};
</script><style scoped>
.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);display: flex;justify-content: center;align-items: center;
}
.modal-content {background: white;padding: 20px;border-radius: 5px;
}
</style>
- 布局組件
子組件可以用于封裝布局結構，如導航欄、側邊欄、頁腳等。這些組件可以獨立管理自己的樣式和結構，方便在多個頁面中復用。
<template><nav class="navbar"><ul><li v-for="item in items" :key="item.text"><a :href="item.link">{{ item.text }}</a></li></ul></nav>
</template><script>
export default {props: {items: Array}
};
</script><style scoped>
.navbar {background: #333;color: white;
}
.navbar ul {list-style: none;padding: 0;display: flex;
}
.navbar li {margin: 0 10px;
}
.navbar a {color: white;text-decoration: none;
}
</style>
- 功能組件
子組件可以封裝特定的功能邏輯，如分頁、搜索框、文件上傳等。這些組件可以獨立管理自己的狀態，并通過事件與父組件通信。
<template><div class="pagination"><button :disabled="currentPage <= 1" @click="prevPage">Previous</button><span>Page {{ currentPage }} of {{ totalPages }}</span><button :disabled="currentPage >= totalPages" @click="nextPage">Next</button></div>
</template><script>
export default {props: {total: Number,pageSize: Number},data() {return {currentPage: 1};},computed: {totalPages() {return Math.ceil(this.total / this.pageSize);}},methods: {prevPage() {if (this.currentPage > 1) {this.currentPage--;this.$emit('update:currentPage', this.currentPage);}},nextPage() {if (this.currentPage < this.totalPages) {this.currentPage++;this.$emit('update:currentPage', this.currentPage);}}}
};
</script><style scoped>
.pagination {display: flex;align-items: center;
}
.pagination button {margin: 0 5px;
}
</style>
- 動畫和過渡
子組件可以封裝動畫和過渡效果，如淡入淡出、滑動、折疊等。這些組件可以獨立管理自己的動畫狀態，并通過事件與父組件通信。
<template><div class="accordion"><div class="accordion-header" @click="toggle"><slot name="header"></slot></div><div class="accordion-body" v-show="isOpen"><slot name="body"></slot></div></div>
</template><script>
export default {data() {return {isOpen: false};},methods: {toggle() {this.isOpen = !this.isOpen;}}
};
</script><style scoped>
.accordion {border: 1px solid #ccc;margin: 10px 0;
}
.accordion-header {background: #f0f0f0;padding: 10px;cursor: pointer;
}
.accordion-body {padding: 10px;
}
</style>
子組件在前端開發中具有多種用途，可以封裝表單控件、數據展示、交互式組件、布局組件、功能組件以及動畫和過渡效果。通過合理使用子組件，可以提高代碼的可維護性和可復用性，使項目結構更加清晰。
