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

資訊專欄INFORMATION COLUMN

Vue組件間的通信

zgbgx / 3438人閱讀

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

1.父組件到子組件通信

通過props屬性來傳遞

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


    



/*------javascript----- */
//注冊全局組件（子組件）
Vue.component("Child",{
    template:"
我是子組件,看后面->{{message}}
",
    props:["message"],  //注冊子組件的props自定義屬性，并且綁定到組件內(nèi)
});
// 注冊全局組件（父組件)
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()將事件觸發(fā)接口暴露出去,參數(shù)二是要傳遞出去的參數(shù)
        }
    },
})

// 注冊全局組件（父）
Vue.component("Parent1",{
    template:`

        我是父組件
         
    
`,
    //通過監(jiān)聽change事件來觸父組件中的changeColor事件，從而實現(xiàn)子到父的通信
    data:function(){
        return{
            style:{
                color:"#000",
            }
        }
    },
    methods:{
        changeColor:function(red){ //接子組件傳過來的參數(shù)
            this.style = {
                color:red,
            }
        }
    },
});

//掛載節(jié)點
var app1 = new Vue({
    el:"#app1",
});
3.同級組件間的通信 
/*------HTML-----*/


    
    
    
    


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

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

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

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

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

相關(guān)文章

  • vue組件通信全面總結(jié)

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

    余學(xué)文 評論0 收藏0

  • VUE組件間的數(shù)據(jù)傳遞

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

    Half 評論0 收藏0

  • 【Vue項目總結(jié)】組件通信處理方案

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

    TerryCai 評論0 收藏0

  • vue中8種組件通信方式, 值得收藏!

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

    BicycleWarrior 評論0 收藏0

  • vue學(xué)習(xí)筆記（三）

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

    fsmStudy 評論0 收藏0

發(fā)表評論

0條評論

zgbgx

男|高級講師

TA的文章

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