Vue 組件

XFLY 發布于2019-08-21 16:17 / 2424人閱讀

摘要：組件組件是最強大的功能之一。它們之間必然需要相互通信父組件要給子組件傳遞數據，子組件需要將它內部發生的事情告知給父組件。父組件通過向下傳遞數據給子組件，子組件通過給父組件發送消息。這是由使用的父組件決定的。

組件

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素.

注冊 全局注冊

局部注冊

不必在全局注冊每個組件。通過使用組件實例選項注冊，可以使組件僅在另一個實例/組件的作用域中可用：

//初始化根實例

配置組件

像這些元素

...

自定義組件被認為是無效的內容，因此在渲染的時候會導致錯誤。變通的方案是使用特殊的 is 屬性：

應當注意，如果您使用來自以下來源之一的字符串模板，這些限制將不適用：

組件通訊

組件 A 在它的模板中使用了組件 B。它們之間必然需要相互通信：父組件要給子組件傳遞數據，子組件需要將它內部發生的事情告知給父組件。

父子通訊

在 Vue 中，父子組件的關系可以總結為 props down, events up。父組件通過 props 向下傳遞數據給子組件，子組件通過 events 給父組件發送消息。

prop

要讓子組件使用父組件的數據，我們需要通過子組件的 props 選項。

Vue.component("child", {
  // 聲明 props
  props: ["message"],
  // 就像 data 一樣，prop 可以用在模板內
  // 同樣也可以在 vm 實例中像“this.message”這樣使用
  template: "{{ message }}"
})

camelCased vs kebab-case

HTML 特性是不區分大小寫的。所以，當使用的不是字符串模板，camelCased (駝峰式) 命名的 prop 需要轉換為相對應的 kebab-case (短橫線隔開式) 命名：

Vue.component("child", {
  // camelCase in JavaScript
  props: ["myMessage"],
  template: "{{ myMessage }}"
})

動態prop

要動態地綁定父組件的數據到子模板的 props，與綁定到任何普通的HTML特性相類似，就是用 v-bind。

子父傳遞數據 (emit)

每個 Vue 實例都實現了事件接口 (Events interface)，即：

使用 $on(eventName) 監聽事件

使用 $emit(eventName) 觸發事件

非父子組件通信

有時候兩個組件也需要通信 (非父子關系)。在簡單的場景下，可以使用一個空的 Vue 實例作為中央事件總線：

var bus = new Vue()  

// 觸發組件 A 中的事件
bus.$emit("id-selected", 1)  

// 在組件 B 創建的鉤子中監聽事件
bus.$on("id-selected", function (id) {
  // ...
})


   
   



## 使用slot分發內容  
注意兩點：  

1. 組件不知道它會收到什么內容。  這是由使用  的父組件決定的。  

2. 組件很可能有它自己的模板。


    
        Slot內容分發

        為了讓組件可以組合，我們需要一種方式來混合父組件的內容與子組件自己的模板。這個過程被稱為 內容分發 (或 “transclusion” 如果你熟悉 Angular)。Vue.js 實現了一個內容分發 API，參照了當前 Web 組件規范草案，使用特殊的  元素作為原始內容的插槽。
        分發完成

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88361.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組件

摘要：構造器有一個選項對象，選項對象的屬性用于定義組件要渲染的。使用注冊組件時，需要提供個參數，第個參數時組件的標簽，第個參數是組件構造器。方法內部會調用組件構造器，創建一個組件實例。什么叫組件：有結構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中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