VUE兄弟组件传值

兄弟组件传值

创建一个实例,向这个实例上添加事件,然后在另外的实例中触发事件,即可实现传值

  • $on 添加事件
  • $emit 触发事件
  • $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触发事件
            vm.$emit('data', this.msg);
        }
    }
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.创建两个组件分别是home.vue组件和news组件 2.在根组件中引入两个组件并实例化 3.在model文件...
    undefind33阅读 16,421评论 2 10
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,993评论 19 139
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,082评论 0 29
  • 万里天蓝 一尘不染 背负青天 漫步云端 大地上铺满阳光 在夕阳下婉若金色的地毯 蜿蜒的河流 远方的山峦 阡陌的...
    是小寒阅读 587评论 8 8
  • 逛街试衣服时受了点刺激。 很多漂亮衣服因为太瘦都穿不出效果,只能忍痛舍弃,万分无奈... 然后在朋友圈发了条消息,...
    琳琅view阅读 184评论 1 1