淺談Vue 中的組件

ls0609 發布于2019-08-23 17:52 / 3035人閱讀

摘要：淺談中的組件一初識組件組件是最強大的功能之一。組件可以擴展元素，封裝可重用的代碼。例子我是組件我要把中的數據傳給我是組件中央事件總線我是用來接收從傳過來的數據我是中的數據我是根組件的數據

淺談 vue 中的組件 一、初識組件

組件 (Component) 是 Vue.js 最強大的功能之一。組件可以擴展 HTML 元素，封裝可重用的代碼。

1、定義組件

Vue自定義組件分為兩種：全局注冊和局部注冊，全局組件可以在任何地方引用，局部組件只能在當前Vue實例使用。

全局注冊 放在通過new創建的Vue實例當中

Vue.component("my-component", {
  template: "我是被全局注冊的組件"
})
/*
  Vue.component(組件名稱[字符串], 組件對象)
*/ 
new Vue({
  el: "#app",
  template: ""
})

局部注冊

const child = {
  template: "我是局部注冊的組件"
}
/*
   通過components選項屬性進行局部注冊：
   components: {
    組件名稱[字符串]: 組件對象
   }
*/ 
new Vue({
  el: "#app",
  template: "",
  components: {
    "my-component": child
  }
})

二、自定義事件 自定義事件原理

通過$emit(event)觸發一個自定義事件

然后通過$on(event,callback) 去執行對應的callback(回調函數)

（兩個event是字符串，且必須名稱相同）

但$on不能在父組件中監聽子組件拋出的事件，所以我們要做到這一點，可以在父組件的模板中使用到子組件的時候，直接用v-on綁定（和$on作用效果一致）

三、組件通信

組件是 vue.js 最強大的功能之一，而組件實例的作用域是相互獨立的，這就意味著不同組件之間的數據無法相互引用。一般來說，組件可以有以下幾種關系：

如上圖所示，A 和 B、B 和 C、B 和 D 都是父子關系，C 和 D 是兄弟關系，A 和 C 是隔代關系（可能隔多代）。

針對不同的使用場景，如何選擇行之有效的通信方式？這是我們所要探討的主題。本文總結了 vue 組件間通信的幾種方式，如 props、$emit/$on、vuex、$parent / $children、$attrs/$listeners和 provide/inject等

1、方法一props/$emit

父組件 A 通過 props 的方式向子組件 B 傳遞，B to A 通過在 B 組件中 $emit, A 組件中 v-on 的方式實現。

父組件向子組件傳值

//App.vue父組件

子組件向父組件傳值

子組件通過 events 給父組件發送消息，實際上就是子組件把自己的數據發送到父組件。



// 父組件

2、方法二 $emit/$on

這種方法通過一個空的 Vue 實例作為中央事件總線（事件中心），用它來觸發事件和監聽事件,巧妙而輕量地實現了任何組件間的通信，包括父子、兄弟、跨級。當我們的項目比較大時，可以選擇更好的狀態管理解決方案 vuex。

例子

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

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

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

淺談Vue模板的那些事兒

摘要：接觸過的童鞋都知道，組件的模板一般都是在選項內定義的，如我是閏土大叔這個用法都是老生常談了，今天來聊聊的內聯模板。作者閏土大叔鏈接來源著作權歸作者所有。 showImg(https://segmentfault.com/img/bV1Og9?w=554&h=294); 接觸過vue的童鞋都知道，組件的模板一般都是在template選項內定義的，如： 1 Vue.component(ch...

focusj 2019-08-21 18:46 評論0 收藏0
好用的Vue狀態管理模式：淺談Vuet在實際應用中解決的問題

摘要：而的狀態測試更類似于單元測試，和組件的依賴較低，組件只會存在調用模塊的方法或者讀取狀態，在組件頻繁的改動中，而的改動相對會較小，所以狀態測試便會存在一定的價值。父子組件通信 showImg(https://segmentfault.com/img/remote/1460000010761687); Vuet提供了模塊化的狀態管理，通過對一個組件的注入，再向其子組件進行分發，使得我們可...

WilsonLiu95 2019-08-21 12:03 評論0 收藏0
淺談vuex

摘要：概念淺談是一個專為應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。更改的中的狀態的唯一方法，類似。允許我們將分割成模塊。通過購物車的一個案列，把vuex學習了一篇。 vuex概念淺談 Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以...

chaos_G 2019-08-23 13:50 評論0 收藏0
淺談NUXT - 基于vue.js的服務端渲染框架

摘要：是一款基于的服務端渲染框架，跟的異曲同工。該配置項用于定義應用客戶端和服務端的環境變量。 Vue因其簡單易懂的API、高效的數據綁定和靈活的組件系統，受到很多前端開發人員的青睞。國內很多公司都在使用vue進行項目開發，我們正在使用的簡書，便是基于Vue來構建的。我們知道，SPA前端渲染存在兩大痛點：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關信息，使...

yearsj 2019-08-01 17:18 評論0 收藏0
淺談NUXT - 基于vue.js的服務端渲染框架

摘要：是一款基于的服務端渲染框架，跟的異曲同工。該配置項用于定義應用客戶端和服務端的環境變量。 Vue因其簡單易懂的API、高效的數據綁定和靈活的組件系統，受到很多前端開發人員的青睞。國內很多公司都在使用vue進行項目開發，我們正在使用的簡書，便是基于Vue來構建的。我們知道，SPA前端渲染存在兩大痛點：（1）SEO。搜索引擎爬蟲難以抓取客戶端渲染的頁面meta信息和其他SEO相關信息，使...

godiscoder 2019-08-20 18:29 評論0 收藏0