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