成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

淺談Vue 中的組件

ls0609 / 3041人閱讀

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

淺談 vue 中的組件 一 、初識(shí)組件

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

1、定義組件

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

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

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

局部注冊(cè)

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

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

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

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

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

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

三、組件通信

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

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

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

父組件向子組件傳值

//App.vue父組件

子組件向父組件傳值

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



// 父組件

2、方法二 $emit/$on

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

例子

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/104273.html

相關(guān)文章

  • 淺談Vue模板的那些事兒

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

    focusj 評(píng)論0 收藏0

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

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

    WilsonLiu95 評(píng)論0 收藏0

  • 淺談vuex

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

    chaos_G 評(píng)論0 收藏0

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

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

    yearsj 評(píng)論0 收藏0

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

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

    godiscoder 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<