国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【Vue項目總結】組件通信處理方案

TerryCai / 3037人閱讀

摘要:組件之間的通信是我們在項目中常常碰到的,而選擇合適的通信方式尤為重要,這里總結下作者在實際項目中所運用到的通信方案,如有遺漏,請大家見諒。示例效果如下兄弟組件同級別組件相互間的通信,我們可以使用或著。

Vue組件之間的通信是我們在項目中常常碰到的,而選擇合適的通信方式尤為重要,這里總結下作者在實際項目中所運用到的通信方案,如有遺漏,請大家見諒。文章代碼具體見DEMO;文章首發于imondo.cn

父子組件

Vue中常見的是父與子組件間的通信,所要用到的關鍵字段是props$emit

props接受父組件傳給子組件信息的字段,它的類型:Array | Object;詳細解釋可以參考文檔

$emit由子組件觸發事件向上傳播給父級消息。

示例:

// Parent




// Child


效果如下:

祖孫組件

有時候我們可能會碰到組件間的無限嵌套,這是我們使用props時無法向下無限極傳遞數據的,這是我們可以用到provide/injectprovide可以向其子孫組件傳遞數據,而不關子孫組件的層級有多深,使用inject都可以拿到數據。詳細解釋可以參考文檔

示例:

// Grand




// Parent

效果如下:

provideinject 綁定并不是可響應的。我們可以通過傳遞祖父級的實例this或著使用observable來使傳遞的數據是響應的。
// Grand



// Child


效果如下:

使用observable讓一個對象可響應。Vue 內部會用它來處理 data 函數返回的對象。

示例:

// Grand
provide() {
  this.read = Vue.observable({
    msg: ""
  })
  return {
    read: this.read
  };
}

效果如下:

兄弟組件

同級別組件相互間的通信,我們可以使用EventBus或著Vuex

簡單的EventBus示例:

// Bus.js
import Vue from "vue";
export default new Vue();

// Child

我是子組件一

// ChildOne

我是子組件二

兄弟叫我:{{ msg }}

效果如下:

v-modelsync

v-model是我們用ElementUI常見的表單綁定值方式;可以直接修改子組件修改父組件傳入的值,簡化了我們組件通信的邏輯。

示例:

// ModelCom
// Home

效果如下:

sync修飾符也可以是我們的prop進行雙向綁定

它需要我們在子組件內觸發this.$emit("update:prop", val)事件

// ModelCom

...
props: ["value"],
methods: {
  handleChange(e) {
    const value = e.target.value;
    // 觸發更新
    this.$emit("update:value", value);
  }
}

// Home

效果如下:

$children$parent

我們可以在組件中通過當前的實例對象訪問到組件的$children$parent來找到各自組件的父級組件或子級組件實例。

示例:

// Child

我是子組件

來自父組件的msg: {{ msg }}

...

$attrs$listeners

$attrs可以通過 v-bind="$attrs" 將組件上的特新都(class 和 style 除外)傳入內部組件;傳入的值與inheritAttrs的設置有關,通常封裝高級組件。

當我們inheritAttrs 設置 true;組件渲染DOM時寫在組件的特性會渲染上去;

$listeners包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它可以通過 v-on="$listeners" 傳入內部組件。

具體詳細可見文檔

示例:

// Attr

Attr

這是$attrs:{{ placeholder }}

這是$listeners:{{ test }}

... // Home

效果如下:

通過封裝查找組件
通過封裝函數來向上或向下派發事件

參考見Vue.js組件精講

// emitter.js
function broadcast(componentName, eventName, params) {
    this.$children.forEach(child => {
        const name = child.$options.name;

        if (name === componentName) {
            child.$emit.apply(child, [eventName].concat(params));
        } else {
            broadcast.apply(child, [componentName, eventName].concat([params]));
        }
    });
}
export default {
    methods: {
        dispatch(componentName, eventName, params) {
            let parent = this.$parent || this.$root;
            let name = parent.$options.name;

            while (parent && (!name || name !== componentName)) {
                parent = parent.$parent;

                if (parent) {
                    name = parent.$options.name;
                }
            }
            if (parent) {
                parent.$emit.apply(parent, [eventName].concat(params));
            }
        },
        broadcast(componentName, eventName, params) {
            broadcast.call(this, componentName, eventName, params);
        }
    }
};
通過封裝函數來查找指定任意組件

參考見Vue.js組件精講

// 由一個組件,向上找到最近的指定組件
function findComponentUpward (context, componentName) {
    let parent = context.$parent;
    let name = parent.$options.name;

    while (parent && (!name || [componentName].indexOf(name) < 0)) {
        parent = parent.$parent;
        if (parent) name = parent.$options.name;
    }
    return parent;
}
export { findComponentUpward };

// 由一個組件,向上找到所有的指定組件
function findComponentsUpward (context, componentName) {
    let parents = [];
    const parent = context.$parent;

    if (parent) {
        if (parent.$options.name === componentName) parents.push(parent);
        return parents.concat(findComponentsUpward(parent, componentName));
    } else {
        return [];
    }
}
export { findComponentsUpward };

// 由一個組件,向下找到所有指定的組件
function findComponentsDownward (context, componentName) {
    return context.$children.reduce((components, child) => {
        if (child.$options.name === componentName) components.push(child);
        const foundChilds = findComponentsDownward(child, componentName);
        return components.concat(foundChilds);
    }, []);
}
export { findComponentsDownward };

// 由一個組件,找到指定組件的兄弟組件
function findBrothersComponents (context, componentName, exceptMe = true) {
    let res = context.$parent.$children.filter(item => {
        return item.$options.name === componentName;
    });
    let index = res.findIndex(item => item._uid === context._uid);
    if (exceptMe) res.splice(index, 1);
    return res;
}
export { findBrothersComponents };
總結

項目中組件的通信方式大概常用的是上面幾種方案,我們可以通過不同的方式來實現組件通信,但是選擇合適組件通信方式可以使我們事半功倍。寫的不當之處,望指正~

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

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

相關文章

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0
  • 關于Vue2一些值得推薦的文章 -- 五、六月份

    摘要:五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新,歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香,消溽暑。鳥雀呼晴,侵曉窺檐語。葉上初陽乾宿雨,水面清圓,一一風荷舉。家住吳門,久作長安旅。五月漁郎相憶否。小楫輕舟,夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly;請::點擊::集web前端最近很火的vue2框架資源;定時更新,歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0
  • Vue項目總結】基于餓了么組件封裝

    摘要:項目中,組件是項目的基石,每個頁面都是組件來組裝起來,我司沒有自己的組件庫,選用的是組件庫,在它的基礎上再次封裝。部分代碼三級效果如下總結組件是項目的積木條,公用組件的封裝成功與否其實是對項目的開發效率有直接影響。 vue項目中,組件是項目的基石,每個頁面都是組件來組裝起來,我司沒有自己的組件庫,選用的是ElementUI組件庫,在它的基礎上再次封裝。 可編輯表格 由于是后臺管理項目,...

    YPHP 評論0 收藏0
  • vue組件通信六種方式(完整版)

    摘要:本文總結了組件間通信的幾種方式,如和,以通俗易懂的實例講述這其中的差別及使用場景,希望對小伙伴有些許幫助。狀態改變提交操作方法。 前言 組件是 vue.js最強大的功能之一,而組件實例的作用域是相互獨立的,這就意味著不同組件之間的數據無法相互引用。一般來說,組件可以有以下幾種關系:showImg(https://segmentfault.com/img/remote/146000001...

    frontoldman 評論0 收藏0

發表評論

0條評論

TerryCai

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<