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可以使用jsx语法吗(vue中正确使用jsx语法的姿势分享)
- vue创建dom节点(Vue批量更新dom的实现步骤)
- vue的watch用法(Vue3中watch的用法与最佳实践指南)
- vue实现聊天(Vue+ssh框架实现在线聊天)
- vue实现列表向上滚动更新(vue实现列表无缝滚动)
- vue轮播图代码(vue实现无缝轮播效果跑马灯)
- vue切换图片效果(Vue.js实现图片切换功能)
- 小白vue教学(尤大大新活petite-vue的实现)
- 面试问vue掌握程度如何回答(面试最常问的13种Vue修饰符)
- vue图片组件使用方法(Vue图片裁剪组件实例代码)
- vue加载html5动画(vue实现旋转木马动画)
- vue点击事件动态禁用(vue开发移动端使用better-scroll时click事件失效的解决方案)
- vue封装组件技巧(浅谈vue中所有的封装方式总结)
- vue前台解析pdf文件流(Vue实现在线预览pdf文件功能利用pdf.js/iframe/embed)
- vue组件keep-alive的原理是什么(如何理解Vue简单状态管理之store模式)
- 大女主 汤唯垂青电视圈,搭档朱亚文出演《大明皇妃孙若微传》(汤唯垂青电视圈)
- 红色代表什么(红色代表什么情感和含义)
- 高中数学题(高中数学题型总结及解题方法)
- 冰岛旅游攻略(冰岛旅游攻略及花费)
- 为什么现在年轻人越来越喜欢买衣服(为什么现在年轻人越来越喜欢买衣服穿)
- 怎么做好SEO(怎么做好seo内容优化)
热门推荐
- mysql8.0关键字段使用(MySQL 8.0新特性之隐藏字段的深入讲解)
- java连接mongodb(Docker连接mongodb实现过程及代码案例)
- nginx和apache服务器配置(Apache、Nginx 服务配置服务器端包含SSI)
- php7.4编译安装(PHP7.3.10编译安装教程)
- 宝塔怎么设置指定ip访问(宝塔面板如何禁止某个IPIP段访问)
- ubuntu11.04安装ssh失败(Ubuntu20.04桌面安装及root权限开通和ssh安装详解)
- sql server 进阶教程(SQL Server游标的介绍与使用)
- 织梦dedecms优化安全设置指南(DedeCms V5.5 性能优化方法分享)
- dedecms增加导航内容(dedecms中将系统的data目录迁移到web以外目录)
- python基础教学之125 装饰器简介(python3 property装饰器实现原理与用法示例)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9