Vue組件定義

imtianx 發布于2019-08-23 10:41 / 1635人閱讀

摘要：組件結構基礎知識屬性屬性維護一個組件內部狀態，其余組件正常情況下不可見。方案選擇單文件一行的簡單結構常規的選擇前邊兩種方案解決不了時候的選擇靈活性高注意不論選擇哪一種方案，定義模板時，一定要有一個非標簽元素作根，有且僅有一個。

簡介

組件是可復用的 Vue 實例。

本質上是一個對象，該對象包含data、computed、watch、methods、filters以及生命周期鉤子等成員屬性。

組件結構：

{
  data(){
    return {
      //
    }
  },
  computed:{
    displayName(){
      return "";
    }
  },
  methods:{
    onClickHandler(params){
      // do something
    }
  }
}

基礎知識 data屬性

data屬性維護一個組件內部狀態，其余組件正常情況下不可見。

可以通過props傳遞給子組件；

可以通過$emit的方式傳遞給父組件；

可以通過this.$refs.ref.$data在mounted生命周期內獲取子組件的內部狀態；

目前不知道如何監聽其變化；

因為計算屬性computed和偵聽屬性watch只能監聽 響應式依賴 的變化，而$refs非響應式。

一個組件的 data 選項必須是一個函數。

  data選項有兩種定義方式：
  
  一、對象形式：
  
  ```
  data:{
    //引用該組件的地方，共用一個狀態的引用，以至于，只要有一處修改了$data中的某一屬性值，其它引用該組件的地方也跟隨著改變該屬性值（其實，不是跟隨，本來就是同一個指向）。
  }
  ```
  
  二、函數形式：
  
  ```
  data(){
    return {
      //引用該組件的地方，每一個組件都會獲得獨立的引用，互不干擾。
    }
  }
  ```

computed屬性 VS methods屬性 VS filter

區別	method	computed	filter
類型	函數	數據變量	函數
用途	作事件處理函數	作數據	作管道符
作用范圍	組建內	組建內	組建內（局部注冊）、全局（全局注冊）
參數	可以帶參	不帶參（非函）	帶參
返回值	不要求	必須有	必須有
觸發	交互時觸發	在它的相關依賴發生改變時才會重新求值	傳入的數據變化時執行

注意：

Vue中并不是所有的屬性都是響應式的，如$refs無法監聽它的變動；

組件構建的主要區別在于模板的生成方式。

模板定義方式 template選項 字符串模板

以HTML標簽結構組成的字符串；

示例：

{
  template: "簡單示例",
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

id選擇器指定的模板

以id標識的一段script標簽包裹的HTML片段；

示例：


{
  template: "#anchored-heading-template",
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

render

發揮JavaScript最大的編程能力，該函數接收一個createElement方法作為第一個參數用來創建VNode；

createElement接收三個參數：組件根節點類型、組件配置對象、子節點（官方關于組件配置對象的說明）；

示例：

{
  render: function (createElement) {
    return createElement(
      "h" + this.level,   // tag name 標簽名稱
      this.$slots.default // 子組件中的陣列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
}

單文件組件

單文件組件將模板、邏輯、樣式在結構上分離，保存在同一個文件中。

方案選擇

template	單文件	render
一行的簡單結構	常規的選擇	前邊兩種方案解決不了時候的選擇（靈活性高）

注意：

不論選擇哪一種方案，定義模板時，一定要有一個非template標簽元素作根DOM，有且僅有一個。

組件注冊方式 局部注冊

以上幾種方案定義的組件本質上都是一個對象，獲取該對象（假設變量名為TabBar），要求只在另一個組件(假設變量名為App)內使用：

App組件的配置對象：

{
  components:{
    "tab-bar": TabBar,
  }
}

這樣就是局部注冊，該組件TabBar只能在App模板中使用，其它組件對TabBar不可見。

全局注冊

以上幾種方案定義的組件本質上都是一個對象，獲取該對象（假設變量名為TabBar），要求項目內任何組件可使用：

一般在項目的入口文件（如：腳手架搭建項目的main.js）中：

Vue.component("tab-bar",TabBar);

這樣就是全局注冊，該組件TabBar能在整個項目內使用，所有組件對TabBar可見。

生命周期鉤子

以下用自己的語言將生命周期鉤子表述一下，如果有不對的地方，請校正：

beforeCreate

在這個時候，生命周期函數已經準備好。

組件實例已經構建，但本組件實例的數據、方法還沒有注入；

可以在各個生命周期內通過組件實例this調用根實例上注入的$router、$store等對象。

可以在本生命周期內進行數據初始化；

created

在這個時候，當前組件實例this上的屬性（$data、props、$methods...）已經注入綁定，可以調用本實例上的成員屬性；

beforeMount

在進入本生命周期之前，會進行以下判斷：

是否有el選項（指定掛載目標）：

有el選項的是根實例；

沒有el選項的是非根實例（默認掛載元素為組件調用的位置）；

是否有template選項：

有template選項的是內聯模板；

沒有template選項的是單文件組件；

個人覺得，還有render選項的判斷；

最終這些模板都會轉換為render函數進行渲染！！！

~~這個生命周期在解析模板，不知道有什么實際用途。~~

mounted

在本生命周期之前，已經將模板渲染為真實DOM，其中vm.$el為組件實例的根DOM元素；

本生命周期是初始化第三方插件的場所；

必要時候，可以在本生命周期內對DOM進行操作；

本生命周期是獲取this.$refs.ref的場所；

GPU云服務器云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96589.html

vue總結系列--組件化

摘要：觸發事件可以攜帶數據，這些數據被用于傳遞給綁定了事件的其它組件的回調函數上，進而被傳遞給其它組件。父組件可以在回調函數里做任何事情，頗有靈活性。一般情況下，父組件會在回調函數中更新自己的狀態數據。上一篇博文梳理了vue的數據驅動和響應式相關的特性，這一篇博文就來梳理vue的一個很重要的特性，組件化。自定義組件之于vue，其意義不亞于函數之于C，java之類的編程語言。函數是計算機科學...

cuieney 2019-08-22 18:28 評論0 收藏0
vue學習筆記3

摘要：主要當作屬性來使用方法表示一個具體的操作，主要書寫業務邏輯一個對象，鍵是需要觀察的表達式，值是對應回調函數。Vue.js - Day3 定義Vue組件什么是組件：組件的出現，就是為了拆分Vue實例的代碼量的，能夠讓我們以不同的組件，來劃分不同的功能模塊，將來我們需要什么樣的功能，就可以去調用對應的組件即可；組件化和模塊化的不同：模塊化：是從代碼邏輯的角度進行劃分的；方便代碼分層開...

番茄西紅柿 2019-04-23 11:45 評論0 收藏0
vue組件

摘要：構造器有一個選項對象，選項對象的屬性用于定義組件要渲染的。使用注冊組件時，需要提供個參數，第個參數時組件的標簽，第個參數是組件構造器。方法內部會調用組件構造器，創建一個組件實例。什么叫組件：有結構HTML 有樣式CSS 有交互（效果）行為信號量存數據組件的行為可以定制？通過屬性設置在Vue中有什么樣的組件(組件進行分類)：實現基本功能的基礎的組件（最小的元素）可復...

tianlai 2019-08-21 17:35 評論0 收藏0
Vue-組件詳解

摘要：除了監聽事件外，還可以用于組件之間的自定義事件。它僅僅作為一個直接訪問子組件的應急方案，應當避免在模板或計算屬性中使用。將和合并成，會自動去判斷是普通標簽還是組件。子組件這里的狀態綁定的是父組件的數據。查看原文站點，更多擴展內容及更佳閱讀體驗！組件詳解組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。全局注冊 Vue.component(my-com...

dadong 2019-08-26 12:00 評論0 收藏0
Vue.js-組件詳解

摘要：事件總線事件總線首先創建了一個名為的空的實例然后全局定義了組件最后創建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內通過來訪問指定名稱的子組件。學習筆記：組件詳解組件詳解組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。全局注冊 Vue.component(my-component, {}); 要在父實例中使用這個組件，必須要...

jeffrey_up 2019-08-23 16:02 評論0 收藏0
認識Vue組件

摘要：認識組件組件是強大的功能之一。注意，所有的組件同時也都是的實例，可接受相同的選項對象。組件全局注冊時通過方式注冊。考慮到會出現禁止使用的場景，需要禁止和啟用組件的功能，所以需要。同樣也是先在子組件的選項中定義好傳遞過來的數據。前言 Vue.js是一套構建用戶界面的漸進式框架（官方說明）。通俗點來說，Vue.js是一個輕量級的，易上手易使用的，便捷，靈活性強的前端MVVM框架。簡潔的A...

xumenger 2019-08-22 11:19 評論0 收藏0