vue基础整理-组件
1--組件
?? ?可以理解為頁面的一部分，其具有獨立的邏輯及功能或界面，同時又能與其他部分進行相應地融合，變成完整的應用。頁面可以由這樣一個個的組件構成，如導航欄、列表項、彈窗、側邊欄、下拉框、多選框等。頁面相當于一個大的框架，將這些組件組合成一個功能更為強大的模塊，組件方便被替換或刪除，而不影響整個應用程序的運行。
?
前端組件化的思想：
將大的東西拆成一個個的小東西，然后完成小東西的功能，最后再將這些小東西進行組合，得到最初想要的模樣，即分而治之的思想。
?
使用組件的優勢：
提高開發效率；可重用；簡化調試步驟；便于協同開發；提升整個項目的可維護性。
?
2—vue中的組件
?? Vue中的組件是一個自定義標簽，vue.js的編輯器為其添加特殊功能；vue也可以擴展原生的html元素，封裝可重用的代碼。
?? 組件的基本組成：樣式結構、行為邏輯、數據
如下為單文件組件，包含了樣式結構、行為邏輯、數據。
??
?
3—注冊組件
全局注冊：
可以在任何模板中使用，使用前先注冊。
語法：使用Vue.component（組件名，選項對象）
其中，Vue是構造函數，component是其下的方法
組件名命名規則：camelCase、kebab-case
在html中使用組件：使用kebab-case命名法
eg. 注冊：Vue.component(’my-component’,{})
?? 使用：<my-component></my-component>
局部注冊：
? 在組件實例中通過選項對象注冊，只在所注冊的作用域中使用
?
{?
components:{
??? 組件名：選項對象
?}
}
?
4--組件間通信：
父組件要給子組件傳遞數據，子組件需要將它內部發生的事情告知給父組件。
?
父組件->子組件：
組件實例的作用域是孤立的，不能在子組件直接用父組件的數據。
父組件向子組件傳遞數據時，可以在組件上使用自定義屬性綁定數據，在組件中需要顯示的用props聲明自定義屬性。
?
子組件->父組件：
子組件向父組件傳遞數據時，需要用到自定義事件，父組件用$on監聽自定義事件，$emit觸發父組件所關心的自定義事件。父組件用v-on用來監聽子組件的事件是否觸發了來作出相應的處理。
?
5—組件中的data必須是函數
?? 每個組件是相互獨立的，如果它們共用一個對象，在更改一個組件數據的時候，會影響其他組件。如果是函數的話，每個組件都會有自己獨立的數據，相互之間不會影響。
?
6—受限制的元素
?? DOM模板解析：vue是在瀏覽器解析和標準化html后才獲取模板內容，所以有些元素限制了能被它包裹的元素。如ul里只能放li
?? 某些元素中放入了自定義屬性，不符合W3C標準，會解析錯誤。變通的方式：使用特殊屬性is來擴展HTML標簽功能。
?
7-單向數據流
?? 數據從父組件流向（傳遞）子組件，只能單向綁定。在子組件內部不應該修改父組件傳遞過來的數據。
改變prop的情況：
?作為data中局部數據的初始值使用；作為子組件中的computed屬性。
?
8-props驗證
? 組件可以為props指定驗證要求，如果未指定驗證要求，vue會發出警告。
Props:{
? propA:Number,? //指定類型
? propB:[String,Number],//多種類型
? propC:[type:String,required:true], //必傳，且為字符串
? propD:[type:Number,default:100],//數字類型，默認100
? propE:{type:Number,default:function(){
?? return 1000
}},
//自定義驗證規則
propF:{validator:function(value){return value>10}}
}
?
?
9-使用slot分發內容
? 使用一種方式混合父組件的的內容與子組件自己的模板，這個過程被稱為內容分發。在子組件中使用特殊的<slot>元素作為內容的插槽。這樣可使組件的可擴展性更強。
單個slot：
? 在子組件模板中有slot標簽，被視為備用內容，在父組件不提供內容的情況下使用，如果父組件提供內容，則把整個內容片段插入到slot所在的dom位置，并替換掉slot標簽本身。
? 子組件模板中沒有slot標簽，父組件提供的內容會被拋棄。 <div id="app"> <h2>自定義組件</h2> <custom> <!--當寫在自定義標簽之間的內容，要混合子組件中的模板--> <div>我是html結構</div> </custom> </div> <script> //定制模板div Vue.component("custom",{ template:` <div> <slot>//該標簽內的內容將會被我是html結構覆蓋掉 <p>這是第1個提醒</p> <p>這是第2個提醒</p> <p>這是第3個提醒</p> </slot> </div> ` }) new Vue({ el:"#app" }); </script> ? <body> <div id="app"> <h2>自定義組件</h2> <custom> <!--當寫在自定義標簽之間的內容，要混合子組件中的模板--> <div>替換第1個提醒</div> <div>替換第2個提醒</div> <div>替換第3個提醒</div> </custom> </div> <script> //定制模板div Vue.component("custom",{ template:` <div> <slot> <p>這是第1個提醒</p> <p>這是第2個提醒</p> <p>這是第3個提醒</p> </slot> </div> ` }) new Vue({ el:"#app" }); </script> </body>?
?
具名slot：
? <slot>元素可以用一個特殊的屬性name來配置如何分發內容。
? 可以使用一個匿名的slot，處理那些沒有對應slot的內容 <div id="app"> <h2>自定義組件</h2> <custom> <!--當寫在自定義標簽之間的內容，要混合子組件中的模板--> <div slot="one">替換第1個提醒</div> <div slot="three">替換第3個提醒</div> <template slot="two"> <div>替換第2個提醒</div> <span>替換第2個提醒</span> <div>替換第2個提醒</div> </template> </custom> </div> <script> //定制模板div Vue.component("custom",{ template:` <div> <slot name="one"><p>這是第1個提醒</p></slot> <slot name="two"><p>這是第2個提醒</p></slot> <slot name="three"><p>這是第3個提醒</p></slot> </div> ` }) new Vue({ el:"#app" }); </script>?
編譯作用域：
? 父組件模板的內容在父組件作用域內編譯；子組件模板的內容在子組件作用域內編譯。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="vue.js"></script> </head> <body> <div id="app"> <custom>? <!--這里渲染的數據是父組件中的數據--> {{message}} </custom> </div> <script> Vue.component("custom",{? //子組件 data(){ return { message:"我是子組件的數據" } }, template:` <div> {{message}}? <!--這里是渲染子組件里的數據--> <p>我是第1個提醒</p> <slot></slot> </div> ` }) new Vue({?? //父組件 el:"#app", data:{ message:"我是父組件的數據" } }); </script> </body> </html>轉載于:https://www.cnblogs.com/haimengqingyuan/p/6934380.html
總結
以上是生活随笔為你收集整理的vue基础整理-组件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Javascript编码规范，好的代码从
- 下一篇： 东北育才 数论专场第2场