組件

概念：template是入口組件，那么掛載在template下的組件是入口組件的子組件

局部組件

三步口訣：聲子，掛子，用子

聲明一個(gè)局部組件，變量名首字母大寫（為了和H5標(biāo)簽做區(qū)分），里面的內(nèi)容和vue實(shí)例化對象的內(nèi)容相似，但是不需要el，data必須是一個(gè)函數(shù)，函數(shù)返回一個(gè)對象 把組件掛載到入口文件的components對象中。 在入口文件的template中使用，可以是雙閉合標(biāo)簽也可以是單閉合標(biāo)簽

全局組件

Vue.component(name,options)

第一個(gè)參數(shù)是組件的名稱

第二個(gè)參數(shù)是組件的對象

注意全局組件要在創(chuàng)建Vue實(shí)例化對象前，否則會(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 /> </div> </div> `, components: { Heard, Aside, Content } } new Vue({ el: '#app', data() { return { msg: '這是測試' } }, template: ` <App></App> `, components: { App } });

組件深入

問：為什么要通過父親獲取數(shù)據(jù)，在傳遞到子組件呢？

答：通過父親向后端獲取數(shù)據(jù)，然后在分發(fā)到各組件可以減少后端的交互，不然各個(gè)組件都向后端發(fā)送請求影響性能

見下圖：

父子組件傳值（父傳子）

1、父 用子 時(shí)通過 綁定自定義屬性 傳遞，

2、子要 聲明 props:[’屬性’]接收父綁定的自定義屬性

3、收到就是自己的隨便用

在template中直接使用 在js中this.屬性名

小補(bǔ)充：綁定自定義屬性時(shí)：常量傳遞直接用，變量傳遞加冒號(hào)

總結(jié)父傳子

父用子：先聲子、掛子、用子

父傳子：父傳子（屬性）、子聲明（接收）、子使用

子傳父

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、作用:對當(dāng)前數(shù)據(jù)添油加醋

2、語法：聲明在組件內(nèi)使用filters對象，返回一個(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)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！