vue組件

tianlai 發布于2019-08-21 17:35 / 1605人閱讀

摘要：構造器有一個選項對象，選項對象的屬性用于定義組件要渲染的。使用注冊組件時，需要提供個參數，第個參數時組件的標簽，第個參數是組件構造器。方法內部會調用組件構造器，創建一個組件實例。

什么叫組件：

有結構HTML
有樣式CSS
有交互（效果）
行為
信號量存數據

組件的行為可以定制？

通過屬性設置

在Vue中有什么樣的組件(組件進行分類)：

實現基本功能的基礎的組件（最小的元素）
可復用的邏輯組件（業務組件）

頁面組件

頁面上所有的東西全都是組件：形成了組件樹

理解組件的創建和注冊

我們用以下幾個步驟來理解組件的創建和注冊：

Vue.extend()是Vue構造器的擴展，調用Vue.extend()創建的是一個組件構造器，而不是一個具體的組件實例。

Vue.extend()構造器有一個選項對象，選項對象的template屬性用于定義組件要渲染的HTML。

使用Vue.component()注冊組件時，需要提供2個參數，第1個參數時組件的標簽，第2個參數是組件構造器。

Vue.component()方法內部會調用組件構造器，創建一個組件實例。

組件應該掛載到某個Vue實例下，否則它不會生效。

組件的使用

需要使用Vue.extend方法創建一個組件，然后使用Vue.component方法注冊組件。Vue.extend方法格式如下：

var MyComponent = Vue.extend({
   // 選項...后面再介紹
})

使用Vue.component(tagName, options)方法注冊組件:

Vue.component("my-component", {
  // 選項
})

組件在注冊之后，即可在HTML標簽中使用這個組件名稱，像使用DOM元素一樣。

下面看一個例子:

// 定義
var MyComponent = Vue.extend({
    template: "A custom component!"
})

// 注冊
Vue.component("my-component", MyComponent)

// 創建根實例
new Vue({
    el: "#example"
})

局部注冊

你不必把每個組件都注冊到全局。你可以通過某個 Vue 實例/組件的實例選項 components 注冊僅在其作用域中可用的組件：

var Child = {
  template: "A custom component!"
}
new Vue({
  // ...
  components: {
    //  將只在父組件模板中可用
    "my-component": Child
  }
})

父組件和子組件

我們可以在組件中定義并使用其他組件，這就構成了父子組件的關系.

我們分幾個步驟來理解這段代碼：

var Child = Vue.extend(...)定義一了個Child組件構造器
var Parent = Vue.extend(...)定義一個Parent組件構造器
components: { "child-component": Child }，將Child組件注冊到Parent組件，并將Child組件的標簽設置為child-component。
template :"

This is a Parent component

"，在Parent組件內以標簽的形式使用Child組件。
Vue.component("parent-component", Parent) 全局注冊Parent組件
在頁面中使用標簽渲染Parent組件的內容，同時Child組件的內容也被渲染出來
Child組件是在Parent組件中注冊的，它只能在Parent組件中使用，確切地說：子組件只能在父組件的template中使用。

組件注冊語法糖

以上組件注冊的方式有些繁瑣，Vue.js為了簡化這個過程，提供了注冊語法糖
使用Vue.component()直接創建和注冊組件：

// 全局注冊，my-component1是標簽名稱
Vue.component("my-component1",{
    template: "This is the first component!"
})

var vm1 = new Vue({
    el: "#app1"
})

Vue.component()的第1個參數是標簽名稱，第2個參數是一個選項對象，使用選項對象的template屬性定義組件模板。
使用這種方式，Vue在背后會自動地調用Vue.extend()。

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

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

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

Vue組件基礎與通信

摘要：組件基礎與通信一腳手架簡介與安裝之前安裝的是模塊，之后安裝的是模塊。如果是三級組件通信，該如何處理比如父組件與孫子組件通信。和，提供和注入實現祖先組件和后代組件之間通信。 Vue組件基礎與通信一、vue cli腳手架 ① vue cli 簡介與安裝 vue cli 3.0之前安裝的是vue-cli模塊，vue cli 3.0之后安裝的是@vue/cli模塊。如果已經全局安裝了舊版本的...

I_Am 2019-08-26 10:48 評論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中8種組件通信方式, 值得收藏!

摘要：一父組件通過的方式向子組件傳遞數據，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。之前寫了一篇關于vue面試總結的文章, 有不少網友提出組件之間通信方式還有很多, 這篇文章便是專門總結組件之間通信的 vue是數據驅動視圖更新的框架, 所以對于vue來說組件間的數據通信非常重要，那么組件之間如何進行數據通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

BicycleWarrior 2019-08-26 10:44 評論0 收藏0
Vue官方推薦的風格指南

摘要：官方推薦的風格指南個人筆記最近剛注意到官方多了一個風格指南的推薦。中始終用組件命名因為官方推薦風格命名，所以能用就用組件命名單詞應該是完整的單詞完整單詞帶易讀性的好處，和書寫麻煩的缺點。 Vue官方推薦的風格指南-個人筆記最近剛注意到vue官方多了一個vue風格指南的推薦。因為業務中一直用的vue，所以梳理學習一下，來增加自己代碼的規范性，效果不錯也可以安利到團隊。文檔沒有對JS...

null1145 2019-08-22 18:28 評論0 收藏0