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 同级组件传值内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- icon图标怎么引入vue(vue引入iconfont图标库的优雅实战记录)
- vue前端搜索功能如何实现(使用Vue3+Vant组件实现App搜索历史记录功能示例代码)
- vue组件keep-alive的原理是什么(如何理解Vue简单状态管理之store模式)
- vue 手机端tab切换页面不刷新(vue Tab切换以及缓存页面处理的几种方式)
- vue滑动切换页面(vue实现点击翻转效果)
- vue3和vue2(Vue3对比Vue2的优点总结)
- vue怎么更换自定义水印(Vue之全局水印的实现示例)
- vue element admin接口(Vue-Element-Admin集成自己的接口实现登录跳转)
- vue可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- vue单元测试实例(Vue-Jest 自动化测试基础配置详解)
- vue和springboot分页开发实现(解决Vue+SpringBoot+Shiro跨域问题)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue自定义列组件(vue自定义表格列的实现过程记录)
- vue左侧边栏的制作(Vue+Vant实现顶部搜索栏)
- vue左右滑动切换(vue实现界面滑动效果)
- vue项目上线教程(vue项目中使用骨架屏的方法)
- 越南旅游攻略(越南旅游攻略自由行)
- 成都旅游攻略(成都旅游攻略自由行最佳线路)
- 给儿童吃什么最好(给儿童吃什么最好消化)
- 杭州旅游攻略()
- 云南旅游攻略(云南旅游攻略5天攻略)
- 收藏 春节假期,这些景区巨划算(收藏春节假期这些景区巨划算)
热门推荐
- cssdiv垂直居中怎么设置(CSS设置DIV垂直居中的N种方法 兼容IE浏览器)
- linux怎么看后台进程(一行代码教你如何隐藏Linux进程)
- python如何判断是否为回文数(对python判断是否回文数的实例详解)
- pythonai识别算法(Python3调用百度AI识别图片中的文字功能示例测试可用)
- sql server 数值类型运算(SQL SERVER2012中新增函数之字符串函数CONCAT详解)
- 织梦标签怎么设置网站(织梦模板DEDECMS文章页实现让用户选择字体大小的代码的方法)
- 将docker中的镜像打包教程(本地使用docker打包部署镜像的方法)
- js 定时切换图片(JavaScript定时器实现无缝滚动图片)
- css怎么快速布局(css重绘与重排的方法)
- apache安装与配置windows(Apache 安装和使用文档)