Java-vue-cli-自定義組件使用
時間：2023-09-08 來源：華清遠見
自定義組件介紹
組件(Component)是Vue.js 最強大的功能之一
組件可以擴展 HTML元素，封裝可重用的代碼
組件系統讓我們可以用獨立可復用的小組件來構建大型應用
自定義組件使用
1定義一個children.vue 組件(子組件)
2定義一個parent.vue 組件引入children組件(父組件)
3定義路由，訪問parent.vue組件，看看什么效果
父組件向子組件通信
一：父組件向子組件傳值
1假設我們想要在子組件children中點擊登錄獲取父組件parent中的用戶文本框中的值，實現代碼如下:
parent.vue修改后的代碼
2在children.vue中，定義props屬性來接收父組件parent傳過來的值代碼如下
二:父組件調用子組件的函數
1在父組件的添加屬性ref,ref的值是引入’import children’的children
2在父組件任意方法中加入入下代碼:
語法: this.$refs.子組件名稱.子組件函數
子組件向父組件通信
一:子組件調用父組件函數
1在父組件中的自定義事件myEve，并綁定父組件任意一個方法，代碼如下
2在子組件任意方法中用代碼this.$emit(”myEve”)來運行自定義事件myEve
二:子組件向父組件傳值
如果要把子組件值傳到父組件，把子組件代碼改成如下
語法: this.$emit("自定義事件名稱"，"要傳值的數據”）
父組件自定義事件名稱對應的函數，添加一個方法參數V，代碼如下:
