Vue03 元件化開發

將乙個頁面拆分成乙個個小的功能塊，每個功能塊完成屬於自己這部分獨立的功能，從而簡化整個頁面的管理和維護,提高專案的擴充套件性,這樣的流程稱作元件化

父傳子基本原理 :借助props 傳遞資料

子傳父基本原理 :子元件中，通過$emit()來發射乙個自定義事件。在父元件中，通過v-on來監聽子元件事件。

}    

解析: 一般情況下,父元件與子元件是單向繫結,即父元件的值改變,子元件中props改變 ,不建議之間修改props去改變父元件的值,這樣會導致父子元件之間耦合度過高,可以使用傳送自定義事件或的方式實現

2.1.1 $children(不推薦)

按鈕我是子元件

data: ,
methods: 
// console.log(this.$children[3].name);
// 2.$refs => 物件型別, 預設是乙個空的物件 ref='bbb'
console.log(this.$refs.aaa.name);}},
components: 
},methods: }},
}})

slot 翻譯為插槽 , 可以理解為電腦中的usb插槽 或是插排中的電源插槽 ,作用是放在元件中以使得元件擁有更多的擴充套件性

1.插槽的基本使用

2.插槽的預設值 button

3.如果有多個值, 同時放入到元件進行替換時, 一起作為替換元素

data: ,

components: }})

當乙個元件中存在多個插槽時,需要使用具名插槽加以區分

|data: ,

components: }})

vue 編譯準則:父元件模板的所有東西都會在父級作用域內編譯；子元件模板的所有東西都會在子級作用域內編譯 也就是說父元件給子元件賦值時,只能使用父元件的資料,但有時候我們可以希望插槽中的值由子元件提供,這是就需要使用作用域插槽

data: ,

components: }}

}})

2 1 元件化開發

doctype html lang en charset utf 8 titletitle head 歡迎來到vue元件化h2 div 歡迎來到vue元件化h2 div 歡迎來到vue元件化h2 div body html 1.定義的元件，可以在同乙個頁面的多個vue例項中去使用 2.元件建立，組建...

Vue學習手冊（四） 元件化開發

三 父子元件通訊 3.3 子傳父事件 四 父子元件直接呼叫 五 插槽類子元件 script中呼叫 以下為父子元件的格式 單向傳值 即子元件中改變值的話，不會影響到父元件值，父元件值變動，會實時改變子元件資料 事件傳送 通常子元件向父元件傳送的是事件，父元件需要知道子元件發生了什麼事件，並做相應的反應...

Vue元件化開發

1 模組化 模組化開發是從 邏輯角度來劃分的。2 元件化 是從ui介面角度來劃分的。使用標籤形式引入元件 mycom div 建立元件第一種方式 vue.component mycom 建立乙個vue例項 var vm newvue methods script body 使用標籤形式引入元件 my...