資訊專欄INFORMATION COLUMN
摘要：使用也有很長(zhǎng)一段時(shí)間但是一直以來(lái)都沒對(duì)其組件之間的通信做一個(gè)總結(jié)這次就借此總結(jié)一下。引用信息將會(huì)注冊(cè)在父組件的對(duì)象上。
使用Vue也有很長(zhǎng)一段時(shí)間,但是一直以來(lái)都沒對(duì)其組件之間的通信做一個(gè)總結(jié),這次就借此總結(jié)一下。 父子組件之間的通信
1）props和$emit
父組件通過(guò)props將數(shù)據(jù)下發(fā)給props,子組件通過(guò)$emit來(lái)觸發(fā)自定義事件來(lái)通知父組件進(jìn)行相應(yīng)的操作
具體代碼如下:
```
// 父組件
props和$emit
{{msg}}
```
2)vm.$parent和vm.$children
vm.$parent: 父實(shí)例,如果當(dāng)前實(shí)例有的話
vm.$children: 獲取當(dāng)前實(shí)例的直接直接子組件,需要注意的是$children并不保證順序,也不是響應(yīng)式的
具體代碼如下:
```
// 父組件的代碼
{{title}}
{{title}}
```
3)ref
ref 被用來(lái)給元素或子組件注冊(cè)引用信息。引用信息將會(huì)注冊(cè)在父組件的 $refs 對(duì)象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子組件上，引用就指向組件實(shí)例
具體代碼如下:
```
// 父組件
父組件
{{msg}}
```
4)自定義事件的v-model
https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model
具體代碼如下:
```
// 父組件
標(biāo)題:
祖先組件和其子孫組件通信
1)provide/inject
provide/inject,允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴,不論組件層次有多深,并在起上下文關(guān)系成立的時(shí)間里始終生效
https://cn.vuejs.org/v2/api/#provide-inject
具體代碼如下:
```
// 父組件
{{title}}
{{$attrs.msg}}
```
```
非父子組件之間的通信
通過(guò)中央事件總線來(lái)進(jìn)行通信
通過(guò)新建一個(gè)Vue事件的bus對(duì)象,然后通過(guò)bus.$emit來(lái)觸發(fā)事件,bus.$on監(jiān)聽觸發(fā)的事件。使用中央事件總線時(shí),需要在手動(dòng)清除它,不然它會(huì)一直存在,原本只執(zhí)行一次的操作,將會(huì)執(zhí)行多次。
具體代碼如下:
```
// 父組件
第一個(gè)組件
// two組件
第二個(gè)組件
數(shù)量: {{num}}
// index.js 創(chuàng)建的bus
import Vue from "vue";
export const BUS = new Vue({
})
```
通過(guò)vuex來(lái)進(jìn)行數(shù)據(jù)管理,具體內(nèi)容見vuex官網(wǎng)
如果有什么不對(duì)的地方,或者還有什么方法我沒有寫到,希望大家可以提出來(lái),謝謝。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/103504.html
摘要：目前能夠有以下八種用途簡(jiǎn)化配置這是初始目的，虛擬機(jī)最大的好處是基于你的應(yīng)用配置能夠無(wú)縫運(yùn)行在任何平臺(tái)上。實(shí)現(xiàn)應(yīng)用之間的解耦，將多個(gè)應(yīng)用服務(wù)部署在多個(gè)中能輕松達(dá)到這個(gè)目的。 Docker 提供輕量的虛擬化，你能夠從Docker獲得一個(gè)額外抽象層，你能夠在單臺(tái)機(jī)器上運(yùn)行多個(gè)Docker微容器，而每個(gè)微容器里都有一個(gè)微服務(wù)或獨(dú)立應(yīng)用，例如你可以將Tomcat運(yùn)行在一個(gè)Docker，而MySQ...
摘要：直接插入排序的算法重點(diǎn)在于尋找插入位置。也稱縮小增量排序，是直接插入排序算法的一種更高效的改進(jìn)版本。希爾排序是非穩(wěn)定排序算法。簡(jiǎn)單選擇排序常用于取序列中最大最小的幾個(gè)數(shù)時(shí)。將新構(gòu)成的所有的數(shù)的十位數(shù)取出，按照十位數(shù)進(jìn)行排序，構(gòu)成一個(gè)序列。 1.直接插入排序 直接插入排序算法是排序算法中最簡(jiǎn)單的，但在尋找插入位置時(shí)的效率不高?；舅枷刖褪菍⒁粋€(gè)待排序的數(shù)字在已經(jīng)排序的序列中尋找找到一個(gè)插...
摘要：內(nèi)存模型即，簡(jiǎn)稱，其規(guī)范了虛擬機(jī)與計(jì)算機(jī)內(nèi)存時(shí)如何協(xié)同工作的，規(guī)定了一個(gè)線程如何和何時(shí)看到其他線程修改過(guò)的值，以及在必須時(shí)，如何同步訪問(wèn)共享變量。內(nèi)存模型要求調(diào)用棧和本地變量存放在線程棧上，對(duì)象存放在堆上。 Java內(nèi)存模型即Java Memory Model，簡(jiǎn)稱JMM，其規(guī)范了Java虛擬機(jī)與計(jì)算機(jī)內(nèi)存時(shí)如何協(xié)同工作的，規(guī)定了一個(gè)線程如何和何時(shí)看到其他線程修改過(guò)的值，以及在必須時(shí)，...
摘要：目錄常見的八種排序常見的八種排序直接插入排序直接插入排序希爾排序希爾排序直接選擇排序直接選擇排序堆排序堆排序冒泡排序冒泡排序快速排序快速排序版本版本挖坑法挖坑法前后指針版前后指針版快速排序代碼 目錄 常見的八種排序 直接插入排序 希爾排序 直接選擇排序 堆排序 冒泡排序? 快速排序 hoar...
摘要：未來(lái)一個(gè)大的趨勢(shì)就是前端開發(fā)的效果，正無(wú)限逼近原生效果同時(shí)一些大廠也在紛紛提前布局了，之前驚艷四方的天貓?jiān)煳锕?jié)淘寶造物節(jié)風(fēng)靡朋友圈的怎么做的如果我們要在這波浪潮上取得先機(jī)，那么就必須提前學(xué)習(xí)。我個(gè)人想學(xué)習(xí)的框架是天貓的。 面向2018年，我覺得前端有這么三個(gè)方向可以突破 前端邏輯層（包括三大框架，webpack，前端數(shù)據(jù)管理） 前端交互層（包括css3，canvas，svg，vr...
閱讀 2765·2021-11-11 16:54
閱讀 2403·2021-10-09 09:44
閱讀 2665·2019-08-30 15:54
閱讀 1985·2019-08-30 11:24
閱讀 1250·2019-08-29 17:03
閱讀 2166·2019-08-29 16:22
閱讀 2141·2019-08-29 13:11
閱讀 1112·2019-08-29 12:14
