美文网首页
vue-cli兄弟组件传值文章

vue-cli兄弟组件传值文章

作者: 明明明明如月 | 来源:发表于2018-10-12 18:17 被阅读0次

1.创建两个兄弟组件分别是header.vue组件和middle.vue组件

1.创建一个父组件chuanzhi.vue

父子组件结构如下：

2.在src文件夹下新建子文件夹model， 在文件夹model新建 VueEvent.js

3.在header文件中写入事件，点击发送通过$emit给兄弟组件middle


4.兄弟组件middle进行接收通过$on

5.页面效果展示，未发送之前

6.页面效果展示，点击发送之后

启发自：https://www.jianshu.com/p/69d53063be7c

顺便拿下哥们总结：

总结：

1.新建一个js文件，然后引入vue 实例化vue 最后暴露这个实例

2.在要广播的地方引入刚才定义实例

3.通过vueEmit.$emit('名称'，‘数据’)

4.在接收数据 

VueEmite.$on('名称'，function(){

})

相关文章

  • vue-cli兄弟组件传值文章

    1.创建两个兄弟组件分别是header.vue组件和middle.vue组件 1.创建一个父组件chuanzhi....

  • angular组件之间的传值

    父子组件传值 父组件给子组件传值通过属性绑定的方式 子组件通过发送是事件给父组件传值 兄弟组件相互传值 兄弟组件通...

  • 组件之间的传值

    组件之间的传值,包括父子组件传值,兄弟组件之间的传值,其中父子组件包括父组件向子组件传值和子组件向父组件传值,现在...

  • （25）打鸡儿教你Vue.js

    vue-cli 父组件如何向子组件传值呢？通过属性的形式传值 父组件： 声明 删除 全局样式与局部样式 scope...

  • vue组件传值总结

    文章有点长，耐心看完，希望你有所收获！！！ 1. 父子组件传值 2. 兄弟组件传值(法一) vuex主要用于管...

  • Vue.js 父子组件传值 . 兄弟组件传值

    概述 vue中组件之间的传值传值情况主要有以下三种 父组件向子组件传值子组件向父组件传值兄弟组件之间相互传值或者是...

  • uni-app通信方式

    一，组件间传值包括下面三种情况： 1,父组件给子组件传值 2,子组件给父组件传值 3,兄弟组件通讯 二 代码1 父...

  • 组件通信

    vue传值可分为父子之间传值、兄弟组件之间传值、跨代组件之间传值 1.父子之间传值：可以使用$emit/props...

  • vuex最详细完整的使用用法

    为什么使用vuex? vuex主要是是做数据交互，父子组件传值可以很容易办到，但是兄弟组件间传值（兄弟组件下又有父...

  • Vue组件之间的传值

    Vue父子组件之间的传值（props）兄弟组件 VUEX

网友评论

      本文标题：vue-cli兄弟组件传值文章

      本文链接：https://www.haomeiwen.com/subject/clbgaftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|vue-cli兄弟组件传值文章|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！