目錄
- 實驗目的
- 相關知識點
- 實驗內容及要求
- 代碼實現
- 效果
實驗目的
（1）掌握組件的創建方法（全局組件、局部組件）；
（2）重點學會組件之間的數據傳遞（prop傳值、自定義事件）；
（3）學會動態組件的創建。
相關知識點
組件是 Vue.js 提供的最強大的功能之一。通過開發組件可以封裝可復用的代碼，并注冊為標簽，從而實現擴展 HTML 元素的功能。
（1）注冊組件：有全局注冊和局部注冊兩種方式。
全局組件（全局注冊的組件）可以在所有實例中使用。注冊全局組件的語法格式如下：
Vue.component(tagName, options)
其中，tagName表示組件名稱，建議遵循 W3C 規范中組件命名方式，即字母全部小寫并包含一個連字符“-”；option可以是應用 Vue.extend()方法創建的一個組件構造器，也可以是組件的選項對象。
在組件注冊之后，就可以在 Vue 根實例中以自定義元素形式來使用該組件了。使用組件的語法格式如下：
其中，tagName：表示組件名稱。
通過使用 Vue 實例或父組件中的 components 選項，可以注冊一個局部組件（只能在當前實例或父組件中使用）。其中，屬性名表示所定義組件的名稱，屬性值表示該組件的選項對象。
（2）數據傳遞
因為組件實例的作用域是相互獨立的，所以子組件的模板無法直接引用父組件中的數據，反之亦然。為了實現組件之間的數據傳遞，Vue.js提供了相應的數據傳遞機制。
父組件通過使用自定義屬性 Prop 給子組件傳遞數據。在組件選項對象的props選項中定義 Prop 屬性。除了可以傳遞靜態數據外，可以通過使用v-bind 指令綁定屬性的方式將父組件中的data數據傳遞給子組件。每當父組件的數據發生變化時，子組件也會隨之變化。由于HTML中的屬性名是不區分大小寫的，所以當 props 中的命名采用“小駝峰”方式，需要在調用組件的標簽中使用其等價的短橫線分割的命名方式來命名屬性。
子組件使用自定義事件來向父組件傳遞數據。子組件可以通過調用內建的 e m i t ( ) 方法并傳入自定義事件名稱來觸發自定義事件。格式如下： v m . emit()方法并傳入自定義事件名稱來觸發自定義事件。格式如下： vm. emit()方法并傳入自定義事件名稱來觸發自定義事件。格式如下：vm.emit(eventName, […args])
其中，eventName: 傳入的事件名稱；[…args]： 可選，觸發事件傳遞的參數。
父組件則可以像處理原生DOM事件一樣通過v-on指令監聽子組件實例的自定義事件。
如果想要在某個組件的根元素上監聽一個原生事件，可以使用 v-on 指令的 native 修飾符。
（3）動態組件
Vue.js允許使用動態組件，讓多個組件使用同一個掛載點，根據條件在不同組件之間動態切換。動態組件通常應用在路由控制或選項卡切換中。
通過使用元素，動態綁定它的 is 屬性，根據 is 屬性的值來判斷使用哪個組件。有時需要保持某些組件的狀態，以避免重復渲染，可以使用一個元素將動態組件包裹起來。
實驗內容及要求
運用組件的相關知識實現選項卡的切換，點擊刪除，刪除相應電影，效果如圖1~3所示。
圖1
圖2
圖3
參考基礎代碼如下：
請在此基礎上，利用Vue組件相關知識完成代碼的編寫和調試。
代碼實現
<!DOCTYPE html>
<html>
<head><title>Vue 電影票房排序示例</title><meta charset="UTF-8"><style> body { font-family: Arial, sans-serif; background-color: #f7f7f7; margin: 0; padding: 0; } #app { max-width: 400px; margin: 0 auto; padding: 20px; background-color: #fff; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } h1 { font-size: 24px; margin-bottom: 20px; } button { background-color: #007bff; color: #fff; border: none; border-radius: 3px; padding: 5px 10px; cursor: pointer; margin-right: 10px; } ul { list-style: none; padding: 0; } li { margin-bottom: 10px; }
</style>
</head>
<body><div id="app"><!-- 排序按鈕 --><button @click="sortByBoxOffice">熱播</button><button @click="reverseOrder">經典</button><!-- 電影列表 --><ul><li v-for="movie in movies" :key="movie.id">{{ movie.name }} - 票房: {{ movie.boxOffice }}<!-- 刪除按鈕 --><button @click="deleteMovie(movie.id)">刪除</button></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script><script>new Vue({el: '#app',data: {movies: [{ id: 1, name: '原神，啟動！', boxOffice: 900 },{ id: 2, name: '我要玩王者榮耀', boxOffice: 1200 },{ id: 3, name: '三國殺司馬游戲', boxOffice: 500 },{id:4,name:'一就是一而就是二',boxOffice:1000}// 更多電影...],originalOrder: []},created() {// 在組件創建時保存原始順序this.originalOrder = [...this.movies];},methods: {sortByBoxOffice() {// 按票房排序當前電影列表this.movies.sort((a, b) => b.boxOffice - a.boxOffice);},reverseOrder() {// 恢復到刪除操作之前的順序this.movies = [...this.originalOrder];},deleteMovie(id) {// 刪除指定 ID 的電影并更新原始順序this.movies = this.movies.filter(movie => movie.id !== id);this.originalOrder = this.originalOrder.filter(movie => movie.id !== id);}}});</script>
</body>
</html>
效果
點擊經典
點擊熱播
點擊刪除
刪除后仍然可以排序
