Vue組件間的通信

zgbgx 發布于2019-08-21 16:42 / 3430人閱讀

摘要：父組件到子組件通信通過屬性來傳遞注冊全局組件子組件我是子組件看后面注冊子組件的自定義屬性，并且綁定到組件內注冊全局組件父組件我是父組件通過這個自定義屬性將值傳入子組件我是父組件傳過來的消息子組件

1.父組件到子組件通信

通過props屬性來傳遞

/*------HTML-----*/

    


/*------javascript----- */
//注冊全局組件（子組件）
Vue.component("Child",{
    template:"我是子組件,看后面->{{message}}",
    props:["message"],  //注冊子組件的props自定義屬性，并且綁定到組件內
});
// 注冊全局組件（父組件)
Vue.component("Parent",{
    template:`
        我是父組件
          
        //通過message這個props自定義屬性將值傳入子組件
    `,
    data:function(){
        return {
            ParentMessage:"我是父組件傳過來的消息"
        }
    },
});
var app = new Vue({
    el:"#app",
});

2.子組件到父組件通信

通過Vue.$emit()方法

/*------HTML-----*/

    

/*------javascript----- */
// 注冊全局組件（子）
Vue.component("Child1",{
    template:"我是子組件，點擊我父組件的字會變色",
    methods:{
        call:function(){
            this.$emit("change","#f00");  
            //通過$emit()將事件觸發接口暴露出去,參數二是要傳遞出去的參數
        }
    },
})

// 注冊全局組件（父）
Vue.component("Parent1",{
    template:`
        我是父組件
         
    `,
    //通過監聽change事件來觸父組件中的changeColor事件，從而實現子到父的通信
    data:function(){
        return{
            style:{
                color:"#000",
            }
        }
    },
    methods:{
        changeColor:function(red){ //接子組件傳過來的參數
            this.style = {
                color:red,
            }
        }
    },
});

//掛載節點
var app1 = new Vue({
    el:"#app1",
});

3.同級組件間的通信

/*------HTML-----*/

    
    
    
    

/*------javascript----- */
Vue.component("Child2",{
    template:"我是兄弟組件2",
    //1.綁定change事件到click事件上
    methods:{
        change:function(){
            this.$emit("change1");
            //2.暴露接口出去，到外部調用
        }
    },
});

Vue.component("Child3",{
    // 6.值傳到這里改變了child3的樣式，變為紅色，實現了兄弟組件間的通信
    template:"我是兄弟組件3",
    props:["change3"],
});

// 掛載節點
var app2 = new Vue({
    el:"#app2",
    data(){
        return{
            change3:"#000",
        }
    },
    methods:{
        change2:function(){
            this.change3 = "#f00"
            // 4.修改掛載節點下的change3的值
        }
    },
})

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

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

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

vue組件通信全面總結

摘要：當一個組件沒有聲明任何時，這里會包含所有父作用域的綁定和除外，并且可以通過傳入內部組件在創建高級別的組件時非常有用。寫在前面組件間的通信是是實際開發中非常常用的一環，如何使用對項目整體設計、開發、規范都有很實際的的作用，我在項目開發中對此深有體會，總結下vue組件間通信的幾種方式，討論下各自的使用場景文章對相關場景預覽父->子組件間的數據傳遞子->父組件間的數據傳遞兄弟...

余學文 2019-08-23 12:16 評論0 收藏0
VUE組件間的數據傳遞

摘要：是雖說吸取了的的思想，但是它是單向數據流的，也就是說子組件無法直接改變父組件狀態。父組件向子組件傳遞數據該方式的數據傳遞是遵循單向數據流的規則的，因此使用起來十分的自然。眾所周知，Vue 是基于組件來構建 web 應用的。組件將模塊和組合發揮到了極致。Vue 是雖說吸取了 AngularJs 的 MVVM的思想，但是它是單向數據流的，也就是說子組件無法直接改變父組件狀態。下面總結出常...

Half 2019-08-21 17:43 評論0 收藏0
【Vue項目總結】組件通信處理方案

摘要：組件之間的通信是我們在項目中常常碰到的，而選擇合適的通信方式尤為重要，這里總結下作者在實際項目中所運用到的通信方案，如有遺漏，請大家見諒。示例效果如下兄弟組件同級別組件相互間的通信，我們可以使用或著。 Vue組件之間的通信是我們在項目中常常碰到的，而選擇合適的通信方式尤為重要，這里總結下作者在實際項目中所運用到的通信方案，如有遺漏，請大家見諒。文章代碼具體見DEMO；文章首發于imon...

TerryCai 2019-08-23 17:52 評論0 收藏0
vue中8種組件通信方式, 值得收藏!

摘要：一父組件通過的方式向子組件傳遞數據，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。之前寫了一篇關于vue面試總結的文章, 有不少網友提出組件之間通信方式還有很多, 這篇文章便是專門總結組件之間通信的 vue是數據驅動視圖更新的框架, 所以對于vue來說組件間的數據通信非常重要，那么組件之間如何進行數據通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

BicycleWarrior 2019-08-26 10:44 評論0 收藏0
vue學習筆記（三）

摘要：直接創建組件使用標簽名組件模板，根據組件構造器來創建組件。相應的，實例也被稱為父組件。而且不允許子組件直接修改父組件中的數據，強制修改會報錯。一、組件（一）什么是組件組件（Component）是 Vue.js最強大的功能之一。組件可以擴展 HTML元素，封裝可重用的代碼組件是自定義元素（對象）。（二）創建組件的兩種方式官方推薦組件標簽名是使用-連接的組合詞，例如：。 1、使用...

fsmStudy 2019-08-21 17:14 評論0 收藏0