VUE兄弟組件傳值

兄弟組件傳值

創(chuàng)建一個實例,向這個實例上添加事件,然后在另外的實例中觸發(fā)事件,即可實現(xiàn)傳值

  • $on 添加事件
  • $emit 觸發(fā)事件
  • $once 一次性事件
  • $off 清除事件
// 傳值使用
const vm = new Vue()

// 實例一
const vm1 = new Vue({
    el: '#app1',
    data: {
        msg: 'app1'
    },
    created () {
        // 給vm添加事件
        vm.$on('data', function (data) {
            console.log(data);
        });
    }
})

// 實例二
const vm2= new Vue({
    el: '#app2',
    data: {
        msg: 'app2'
    },
    methods: {
        sendValue () {
            // 使用vm觸發(fā)事件
            vm.$emit('data', this.msg);
        }
    }
})
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.創(chuàng)建兩個組件分別是home.vue組件和news組件 2.在根組件中引入兩個組件并實例化 3.在model文件...
    undefind33閱讀 16,577評論 2 10
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,533評論 19 139
  • 這篇筆記主要包含 Vue 2 不同于 Vue 1 或者特有的內(nèi)容,還有我對于 Vue 1.0 印象不深的內(nèi)容。關(guān)于...
    云之外閱讀 5,173評論 0 29
  • 萬里天藍 一塵不染 背負青天 漫步云端 大地上鋪滿陽光 在夕陽下婉若金色的地毯 蜿蜒的河流 遠方的山巒 阡陌的...
    是小寒閱讀 614評論 8 8
  • 逛街試衣服時受了點刺激。 很多漂亮衣服因為太瘦都穿不出效果,只能忍痛舍棄,萬分無奈... 然后在朋友圈發(fā)了條消息,...
    琳瑯view閱讀 232評論 1 1

友情鏈接更多精彩內(nèi)容