vue組件知識全梳理

組件

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

局部組件

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

1. 聲明一個局部組件，變量名首字母大寫（爲了和H5標籤作區分），裏面的內容和vue實例化對象的內容類似，可是不須要el，data必須是一個函數，函數返回一個對象
2. 把組件掛載到入口文件的components對象中。
3. 在入口文件的template中使用，能夠是雙閉合標籤也能夠是單閉合標籤

全局組件

Vue.component(name,options)
第一個參數是組件的名稱
第二個參數是組件的對象
注意全局組件要在建立Vue實例化對象前，不然會報錯

// 全局組件(要在建立Vue實例以前)
 Vue.component('Vbtn', {
 template: `<button>全局按鈕組件</button>`
 })
 // 一、建立一個入口組件
 // 二、建立頭部組件，側邊欄組件和內容組件
 var Heard = {
 template: `
 <div>
 <h2>我是頭部組件</h2>
 <Vbtn></Vbtn>
 </div>
 `
 }
 var Aside = {
 template: `
 <div>我是側邊欄組件</div>
 `
 }
 var Content = {
 template: `
 <div>我是內容組件</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
 }
 });

組件深刻

問：爲何要經過父親獲取數據，在傳遞到子組件呢？
答：經過父親向後端獲取數據，而後在分發到各組件能夠減小後端的交互，否則各個組件都向後端發送請求影響性能
見下圖：

父子組件傳值（父傳子）

一、父用子時經過綁定自定義屬性傳遞，
二、子要聲明props:['屬性']接收父綁定的自定義屬性
三、收到就是本身的隨便用

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

  

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

總結父傳子

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

子傳父

一、父用子綁定自定義事件
二、子觸發自定義事件：this.$emit()

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

全局組件的數據傳遞

一、經過VUE內置組件slot分發內容

緣由：若是不使用slot沒法修改全局組件的內容
做用：slot元素做爲承載分發內容的出口

二、父子傳值

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

若是要觸發原生的事件須要經過 @原生事件名.native調用

三、具名插槽

在子組件中聲明使用vue的內置組件：
<slot name = "one"></slot>
父組件中調用
<h2 slot= "one"></h2>
這樣作的目的：能夠一條數據一個坑，數據不會亂了

附加功能

一、過濾器filters

一、做用:對當前數據添油加醋
二、語法：聲明在組件內使用filters對象，返回一個函數，函數必定要有返回值
三、調用：template中調用過濾器：數據屬性|過濾器名字

var Content = {
     template: `
         <div>
         <input type = number  v-model = "msg"/>
         <h2>{{msg|RmbData}}</h2>
         </div>
     `,
     data(){
         return{
            msg:10
         }
     },
     filters:{
         RmbData(value){
            return '$'+value
         }
     }
 }

生命週期