vue組件入門知識(shí)全梳理
組件
概念：template是入口組件，那么掛載在template下的組件是入口組件的子組件
局部組件
三步口訣：聲子，掛子，用子
- 聲明一個(gè)局部組件，變量名首字母大寫（為了和H5標(biāo)簽做區(qū)分），里面的內(nèi)容和vue實(shí)例化對(duì)象的內(nèi)容相似，但是不需要el，data必須是一個(gè)函數(shù)，函數(shù)返回一個(gè)對(duì)象
- 把組件掛載到入口文件的components對(duì)象中。
- 在入口文件的template中使用，可以是雙閉合標(biāo)簽也可以是單閉合標(biāo)簽
全局組件
Vue.component(name,options)
第一個(gè)參數(shù)是組件的名稱
第二個(gè)參數(shù)是組件的對(duì)象
注意全局組件要在創(chuàng)建Vue實(shí)例化對(duì)象前，否則會(huì)報(bào)錯(cuò)
// 全局組件(要在創(chuàng)建Vue實(shí)例之前)
Vue.component('Vbtn', {
template: `<button>全局按鈕組件</button>`
})
// 1、創(chuàng)建一個(gè)入口組件
// 2、創(chuàng)建頭部組件，側(cè)邊欄組件和內(nèi)容組件
var Heard = {
template: `
<div>
<h2>我是頭部組件</h2>
<Vbtn></Vbtn>
</div>
`
}
var Aside = {
template: `
<div>我是側(cè)邊欄組件</div>
`
}
var Content = {
template: `
<div>我是內(nèi)容組件</div>
`
}
var App = {
template: `
<div class="main">
<Heard class = "heaed"></Heard>
<div class="main2">
<Aside class="aside"></Aside>
<Content class="content"/>
</div>
</div>
`,
components: {
Heard,
Aside,
Content
}
}
new Vue({
el: "#app",
data() {
return {
msg: "這是測(cè)試"
}
},
template: `
<App></App>
`,
components: {
App
}
});
組件深入
問：為什么要通過父親獲取數(shù)據(jù)，在傳遞到子組件呢？
答：通過父親向后端獲取數(shù)據(jù)，然后在分發(fā)到各組件可以減少后端的交互，不然各個(gè)組件都向后端發(fā)送請(qǐng)求影響性能
見下圖：
父子組件傳值（父?jìng)髯樱?/strong>
1、父 用子 時(shí)通過 綁定自定義屬性 傳遞，
2、子要 聲明 props:['屬性']接收父綁定的自定義屬性
3、收到就是自己的隨便用
在template中直接使用 在js中this.屬性名
小補(bǔ)充：綁定自定義屬性時(shí)：常量傳遞直接用，變量傳遞加冒號(hào)
總結(jié)父?jìng)髯?/strong>
父用子：先聲子、掛子、用子
父?jìng)髯樱焊競(jìng)髯樱▽傩裕?、子聲明（接收）、子使?/p>
子傳父
1、父 用子 綁定 自定義事件
2、子觸發(fā)自定義事件：this.$emit()
第一個(gè)參數(shù)是**自定義事件名** 第二個(gè)參數(shù)是**傳遞進(jìn)去的值** 
全局組件的數(shù)據(jù)傳遞 1、通過VUE內(nèi)置組件slot分發(fā)內(nèi)容
原因：如果不使用slot無法修改全局組件的內(nèi)容
作用：slot元素作為承載分發(fā)內(nèi)容的出口
2、父子傳值
自定義屬性傳遞常量直接使用不需要加冒號(hào)
如果要觸發(fā)原生的事件需要通過 @原生事件名.native調(diào)用
3、具名插槽
在子組件中聲明使用vue的內(nèi)置組件：
<slot name = "one"></slot>
父組件中調(diào)用
<h2 slot= "one"></h2>
這樣做的目的：可以一條數(shù)據(jù)一個(gè)坑，數(shù)據(jù)不會(huì)亂了
附加功能
1、過濾器filters
1、作用:對(duì)當(dāng)前數(shù)據(jù)添油加醋
2、語法：聲明在組件內(nèi)使用filters對(duì)象，返回一個(gè)函數(shù)，函數(shù)一定要有返回值
3、調(diào)用：template中調(diào)用過濾器：數(shù)據(jù)屬性|過濾器名字
var Content = {
template: `
<div>
<input type = number v-model = "msg"/>
<h2>{{msg|RmbData}}</h2>
</div>
`,
data(){
return{
msg:10
}
},
filters:{
RmbData(value){
return '$'+value
}
}
}
生命周期
總結(jié)
到此這篇關(guān)于vue組件入門知識(shí)全梳理的文章就介紹到這了,更多相關(guān)vue組件知識(shí)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue版日歷組件的實(shí)現(xiàn)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解vue項(xiàng)目的構(gòu)建，打包，發(fā)布全過程
小編給大家通過本文詳細(xì)介紹了關(guān)于vue.js項(xiàng)目的構(gòu)建、打包、發(fā)布的全過程，文章很以后價(jià)值，值得你參考。2017-11-11
vue 循環(huán)加載數(shù)據(jù)并獲取第一條記錄的方法
今天小編就為大家分享一篇vue 循環(huán)加載數(shù)據(jù)并獲取第一條記錄的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了詳解Vue-cli3.X使用px2rem遇到的問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue-router二級(jí)導(dǎo)航切換路由及高亮顯示的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要介紹了詳解vue中this.$emit()的返回值是什么，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue實(shí)現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁
這篇文章主要介紹了vue實(shí)現(xiàn)兄弟組件之間跳轉(zhuǎn)指定tab標(biāo)簽頁，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹
這篇文章主要介紹了Vue學(xué)習(xí)筆記進(jìn)階篇之vue-cli安裝及介紹，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
el-date-picker 選擇日期范圍只保存左側(cè)日期面板的實(shí)現(xiàn)代碼
接到這樣的需求,日期篩選,但限制只能選擇同一個(gè)月的數(shù)據(jù),故此應(yīng)該去掉右側(cè)月份面板,今天通過本文給大家分享el-date-picker 選擇日期范圍只保存左側(cè)日期面板的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2024-06-06
這篇文章主要為大家詳細(xì)介紹了VUE 3D輪播圖封裝實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07