vue 中使用組件的步驟為:創建組件定義組件模板定義組件腳本注冊組件在模板中使用組件傳遞 props(可選)發射事件(可選)使用 slots(可選)
Vue 中使用組件的步驟
第一步:創建組件
使用 Vue CLI 腳手架創建新組件:<a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15721.html" target="_blank">vue</a> create component-name
或者在 src 目錄下手動創建組件文件(.vue 擴展名)
第二步:定義組件模板
在組件文件中添加模板代碼,指定組件渲染的 HTML 結構。
第三步:定義組件腳本
在組件文件中添加腳本代碼,定義組件的功能和狀態。
包括 data()、methods()、computed() 和其他鉤子函數。
第四步:注冊組件
在 main.js 文件中使用 Vue.component() 方法注冊組件。
指定組件名稱和選項對象(包含模板和腳本)。
第五步:在模板中使用組件
在主模板文件中,使用組件名稱作為自定義 HTML 元素使用組件。
例如:<component-name></component-name>
第六步:傳遞 props(可選)
組件可以接收 props(屬性),用于從父組件傳遞數據。
在組件腳本中定義 props() 選項,并通過 props 對象傳遞數據。
第七步:發射事件(可選)
組件可以發射事件,用于與父組件通信。
在組件腳本中使用 $emit() 方法發射事件,并在父組件中使用 v-on 指令監聽事件。
第八步:使用 slots(可選)
組件可以定義插槽,用于允許子組件填充特定內容區域。
在組件模板中使用 元素定義插槽。