vue 父组件传值(Vue两个同级组件传值实现)
类别:编程学习 浏览量:814
时间:2021-10-05 00:20:20 vue 父组件传值
Vue两个同级组件传值实现Vue组件之间是有联系的,避免不了组件之间要互相传值,父给子使用v-bind绑定自定义属性和使用props来接受
子给父使用@自定义事件='函数' this.$emit('自定义事件','要发送的内容'),子组件通过$emit来触发父组件的函数来实现
但是两个同级组件之间这么互相传值
<li id='app'> <children1></children1> <children2></children2> </li> <script> var children1 = {}; var children2 = {}; var vm = new Vue({ el:'#app', components:{ children1, children2 } }) </script>
现在要将children1组件中的数据传给children2组件
主要使用到vue实例中的$on()和$emit()
<li id='app'> <children1></children1> <children2></children2> </li> <script> var Event = new Vue({}); // 创建一个vue实例用来作为传值的媒介 var children1 = { template:` <li> <button @click='send'>点我给children2组件发送数据</button> </li> `, data(){ return { msg:'我是要给children2发送的数据' } }, methods:{ send(){ Event.$emit('go',this.msg) } } }; var children2 = { template:` <li> <h2>从children1组件接收到的值:{{msg1}}</h2> </li> `, data(){ return{ msg1:'' } }, created(){ Event.$on('go',(v) => { // 必须使用箭头函数因为this this.msg1 = v; }) } }; var vm = new Vue({ el:'#app', components:{ children1, children2 } }) </script>
chilren1组件要发送数据使用的是Event.$emit()
chilren2组件要接收数据使用Eevent.$on()
到此这篇关于Vue两个同级组件传值实现的文章就介绍到这了,更多相关Vue 同级组件传值内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vue过滤器使用思路(vue 过滤器和自定义指令的使用)
- 使用vue组件开发项目(Vue记事本实例详解)
- vue 单文件组件(vue实现一个单文件组件的完整过程记录)
- vue 为什么使用虚拟dom(Vue虚拟Dom到真实Dom的转换)
- vue编程加入购物车(vuex实现简单的购物车功能)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vueassets文件路径(vue如何根据url下载非同源文件)
- vue应用转flutter(Vue和Flask通信的实现)
- mongovue的使用
- vue组件之间的通信(超详细的vue组件间通信总结)
- vuex存取修改数据流程(vuex数据持久化的两种实现方案)
- vue和springboot分页开发实现(解决Vue+SpringBoot+Shiro跨域问题)
- vue自定义列组件(vue自定义表格列的实现过程记录)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue项目上线教程(vue项目中使用骨架屏的方法)
- vue怎么引入axios(如何用vue封装axios请求)
- 马来西亚旅游攻略(马来西亚旅游攻略自由行攻略)
- 缅甸旅游攻略(缅甸旅游攻略必去景点推荐)
- 《庆余年2》新消息,原班人马,肖战特别出演,这才是最好的安排(庆余年2新消息原班人马)
- 宁夏灵武恐龙化石发现始末(宁夏灵武恐龙化石发现始末)
- 到了岁末 临门一脚 节点,天台综合督评会目标直指 全年红(到了岁末临门一脚)
- 寒假余额不满24小时,不如来一场说走就走的亲子阅读之旅(寒假余额不满24小时)
热门推荐
- mysql标签的用法(mysql 的indexof函数用法说明)
- datetimepicker怎么设置空值(浅谈amaze-ui中datepicker和datetimepicker注意的几点)
- laravel接口规范(Laravel5.5 手动分页和自定义分页样式的简单实现)
- 用php调用函数的换行(php中关于换行的实例写法)
- phpstudy中apache到期如何修改(phpStudy找不到Apache“服务名” 解决方法)
- vue组件滚动加载教程(Vue组件封装上传图片和视频的示例代码)
- sqlserver字符串截取填充(SQL Server实现split函数分割字符串功能及用法示例)
- goweb框架哪个用的最多(教你搭建一个简单的Go Web服务器)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- wdcp命令工具(简单3条命令彻底清除WDCP占用空间)