成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

淺談Vue 中的組件

ls0609 / 3091人閱讀

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

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

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

1、定義組件

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

全局注冊 放在通過new創(chuàng)建的Vue實例當(dāng)中

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)觸發(fā)一個自定義事件

然后通過$on(event,callback) 去執(zhí)行對應(yīng)的callback(回調(diào)函數(shù))

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

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

三、組件通信

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

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

針對不同的使用場景，如何選擇行之有效的通信方式？這是我們所要探討的主題。本文總結(jié)了 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 的方式實現(xiàn)。

父組件向子組件傳值

//App.vue父組件

子組件向父組件傳值

子組件通過 events 給父組件發(fā)送消息，實際上就是子組件把自己的數(shù)據(jù)發(fā)送到父組件。



// 父組件

2、方法二 $emit/$on

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

例子

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/104273.html

相關(guān)文章

  • 淺談Vue模板的那些事兒

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

    focusj 評論0 收藏0

  • 好用的Vue狀態(tài)管理模式：淺談Vuet在實際應(yīng)用中解決的問題

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

    WilsonLiu95 評論0 收藏0

  • 淺談vuex

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

    chaos_G 評論0 收藏0

  • 淺談NUXT - 基于vue.js的服務(wù)端渲染框架

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

    yearsj 評論0 收藏0

  • 淺談NUXT - 基于vue.js的服務(wù)端渲染框架

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

    godiscoder 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<