成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue組件間的通信

zgbgx / 3479人閱讀

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

1.父組件到子組件通信

通過(guò)props屬性來(lái)傳遞

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


    



/*------javascript----- */
//注冊(cè)全局組件（子組件）
Vue.component("Child",{
    template:"
我是子組件,看后面->{{message}}
",
    props:["message"],  //注冊(cè)子組件的props自定義屬性，并且綁定到組件內(nèi)
});
// 注冊(cè)全局組件（父組件)
Vue.component("Parent",{
    template:`

        我是父組件
          
        //通過(guò)message這個(gè)props自定義屬性將值傳入子組件
    
`,
    data:function(){
        return {
            ParentMessage:"我是父組件傳過(guò)來(lái)的消息"
        }
    },
});
var app = new Vue({
    el:"#app",
});
2.子組件到父組件通信

通過(guò)Vue.$emit()方法

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


    


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

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

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

//掛載節(jié)點(diǎn)
var app1 = new Vue({
    el:"#app1",
});
3.同級(jí)組件間的通信 
/*------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色，實(shí)現(xiàn)了兄弟組件間的通信
    template:"
我是兄弟組件3
",
    props:["change3"],
});

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/88616.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

zgbgx

男|高級(jí)講師

TA的文章

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