自我总结篇之vue的组件通信（父传子子传父非父子）

一：父传子

父组件代码如下：

<template><div class="father"><child :message='message' :message2='message2'></child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {components:{child},data(){return{message: '我是来自父组件的第一条message',message2:'我是来自父组件的第二条message'}}
}
</script>

子组件代码如下：

<template><div class="child">{{message}}<br/>{{message2}}</div>
</template>
<script>
export default {props:['message','message2']
}
</script>

运行结果如下图：

二：子传父

子组件代码如下：

<template><div class="child" ><button @click="sendMsgToParent">点击开始传值</button></div>
</template>
<script>
export default {data(){return{}},methods:{sendMsgToParent(){this.$emit('listenMsg','我是来自子组件的message')}}
}
</script>

父组件代码如下：

<template><div class="father">{{msg}}<child v-on:listenMsg="showMsg"></child>
</div>
</template>
<script>
import child from '@/components/child.vue'
export default {components:{child},data(){return{msg:'我是来自父组件的msg'}},methods:{showMsg(data){this.msg = data}}
}
</script>

运行结果如下：

点击按钮后，运行结果如下：

三：非父子

如果是非父子进行组件通信的话，我们首先要创建一个桥梁，通过这个桥梁使两个组件产生联系。

首先创建‘桥梁’-----bus.js，代码如下

import Vue from 'vue'
const bus = new Vue()
export default bus

然后组件A通过点击事件想将数据发送给组件B，代码如下

<template><div class="hello">{{number}}<br/><button @click="sendNumber()">发送</button></div>
</template>
<script>
import bus from '../assets/js/bus.js'
export default {data(){return{number:'我是hello组件参数123'}},methods:{sendNumber(){bus.$emit('acceptNumber',this.number)}}
}
</script>

组件B接受发送过来的数据，代码如下

<template><div class="world">{{number}}</div>
</template>
<script>
import bus from '../assets/js/bus.js'
export default {data(){return{number:'我是world组件参数456'}},created(){bus.$on('acceptNumber',data =>{this.number = data})}
}
</script>

代码运行后，演示结果如下图

当点击发送按钮后，演示结果如下图

至此，非父子组件通信完成。

转载于:https://www.cnblogs.com/YMoonwind/p/11164129.html

自我总结篇之vue的组件通信（父传子子传父非父子）相关推荐

（25）Vue.js组件通信—父组件向子组件传值
一.Vue.js组件通信介绍子组件如何获取父组件中的数据?父组件如何得知子组件的数据变更?如果是更加复杂的组件关系呢?在组件间传递数据的操作,称为组件通信. 二.Vue.js组件通信内容 • 父组件 ...
vue从入门到精通之进阶篇（二）组件通信：兄弟组件通信
$emit和$on进行组件之间的传值注意:emit和emit和emit和on的事件必须在一个公共的实例上,才能够触发需求: 1.有A,B,C三个组件,同时挂载到入口组件中 2.将A组件中的 ...
VUE.js组件通信精髓归纳（基础篇）
前言文章涉及的内容可能不全面,但量很多,需要慢慢看.我花了很长的时间整理,用心分享心得,希望对大家有所帮助.但是难免会有打字的错误或理解的错误点,希望发现的可以邮箱告诉我1163675970@qq. ...
Vue入门 ---- 组件通信
##组件通信: 子组件获取父组件的数据父组件获取子组件的数据平行组件之间的通信 vue2.0中用子组件修改父组件数据报错问题一定需要通过子组件修改父组件子组件获取父组件的数据通过子组件中的属 ...
vue的组件通信，父子/子孙组件传参和方法调用
随着代码量的提示,肯定是要把弹框.上传等一些公用的表单封装成组件的 1-1.父传子 :seldata="SiteList"为父传子,seldata子组件接收的值,SiteList为 ...
Vue组件通信09-多层级组件通信（爷爷到孙子-传方法）-$listener
components/Parent.vue <template><div>我是父组件<br>这里显示父级的msg:{{msg}}<Son :msg=" ...
（26）Vue.js组件通信—props 命名规则
建议 prop 命名使用 camelCase(驼峰命名法),父组件绑定时使用 kebab-case(多个单词使用连字符连接书写).
vue 祖孙组件通信，祖组件获取孙组件数据
祖组件: <select-item selectFiled="tyreTreadWidth" :width="70" v-on:selected=&quo ...
springboot与php通讯,Springboot第二篇：与前端fetch通信（关于传输数据上传文件等前后端的处理）...
本章讲述的是关于前后端通信关于对应性,前端为react的View,会分传递不同值有不同的处理情况. 首先关于Springboot内的代码变更都是在IndexController.java内,以下是代码 ...

自我总结篇之vue的组件通信（父传子子传父非父子）

自我总结篇之vue的组件通信（父传子子传父非父子）相关推荐

最新文章

热门文章

自我总结篇之vue的组件通信（父传子 子传父 非父子）

自我总结篇之vue的组件通信（父传子 子传父 非父子）相关推荐

最新文章

热门文章

自我总结篇之vue的组件通信（父传子子传父非父子）

自我总结篇之vue的组件通信（父传子子传父非父子）相关推荐