組件

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

局部組件

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

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

全局組件

Vue.component(name,options)

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

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

注意全局組件要在創(chuàng)建Vue實例化對象前，否則會報錯

 // 全局組件(要在創(chuàng)建Vue實例之前)
 Vue.component('Vbtn', {
 template: `<button>全局按鈕組件</button>`
 })
 // 1、創(chuàng)建一個入口組件
 // 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: "這是測試"
 }
 },
 template: `
 <App></App>
 `,
 components: {
 App
 }
 });

組件深入

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

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

見下圖：

父子組件傳值（父傳子）

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

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

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

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

小補充：綁定自定義屬性時：常量傳遞直接用，變量傳遞加冒號

總結(jié)父傳子

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

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

子傳父

1、父 用子 綁定 自定義事件

2、子觸發(fā)自定義事件：this.$emit()

第一個參數(shù)是**自定義事件名**
第二個參數(shù)是**傳遞進(jìn)去的值**
![image](/img/bVbO3Ps)

全局組件的數(shù)據(jù)傳遞 1、通過VUE內(nèi)置組件slot分發(fā)內(nèi)容

原因：如果不使用slot無法修改全局組件的內(nèi)容

作用：slot元素作為承載分發(fā)內(nèi)容的出口

2、父子傳值

自定義屬性傳遞常量直接使用不需要加冒號

如果要觸發(fā)原生的事件需要通過 @原生事件名.native調(diào)用

3、具名插槽

在子組件中聲明使用vue的內(nèi)置組件：

<slot name = "one"></slot>

父組件中調(diào)用

<h2 slot= "one"></h2>

這樣做的目的：可以一條數(shù)據(jù)一個坑，數(shù)據(jù)不會亂了

附加功能

1、過濾器filters

1、作用:對當(dāng)前數(shù)據(jù)添油加醋

2、語法：聲明在組件內(nèi)使用filters對象，返回一個函數(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組件入門知識全梳理的文章就介紹到這了,更多相關(guān)vue組件知識內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論