在vue-cli中组件通信的方法
本文介绍了在vue-cli中组件通信的方法,分享给大家。具体如下:
vue组件之间的通信包括三种:
1.父组件向子组件通信
2.子组件向父组件通信
3.同级组件之间的通信
一.父传子组件通信
拿app.vue当父组件,content.vue当子组件
1.父组件中导入子组件(子组件导出)
import contents from './components/content';
2.在父组件中注册子组件
data() { return { test:'0' }; }, components:{ 'v-header':headers, 'v-content':contents }
3.子组件通过props来接收数据
<v-content :childs='test'></v-content>
二.子与父组件通信
子组件:
<template> <div @click="down()"></div> </template> methods: { down() { this.$emit('down','null'); //主动触发down方法,'null'为向父组件传递的数据 } }
父组件:
<div> <child @down="changes" :test="test"></child> //监听子组件触发的down事件,然后调用changes方法 </div> methods: { changes(msg) { this.test= test; } }
二.非父子组件通信
//把a当作一个中转站 var a = new Vue();
组件1触发:
<div @click="eve"></div> methods:{ eve(){ a.$emit("change",'null') } }
组件2接收:
<div></div> created(){ a.$on('change',()=>{ this.msg = 'null' }) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
您可能感兴趣的文章:
- Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
- Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
相关推荐
-
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
在git命令行下,执行以下命令完成环境的搭建: 1,npm install --global vue-cli 安装vue命令行工具 2,vue init webpack vue-demo 使用vue命令生成一个webpack项目,项目名称为vue-demo 3,cd vue-demo 切入项目 4,npm install安装package.json中的所有依赖包 5,npm run dev运行项目 一.父组件向子组件传递数据 然后删除默认的Hello.vue组件,把App.vue整理成以下样子:
-
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
我们接着上文继续,本文我们讲解兄弟组件的通信,项目结构还是跟上文一样. 在src/assets目录下建立文件EventHandler.js,该文件的作用在于给同级组件之间传递事件 EventHandler.js代码: import Vue from 'Vue'; export default new Vue(); 1,在Components目录下新建一个组件Brother1.vue <template> <div> <h3>Z国: ghostwu</h3>
-
在vue-cli中组件通信的方法
本文介绍了在vue-cli中组件通信的方法,分享给大家.具体如下: vue组件之间的通信包括三种: 1.父组件向子组件通信 2.子组件向父组件通信 3.同级组件之间的通信 一.父传子组件通信 拿app.vue当父组件,content.vue当子组件 1.父组件中导入子组件(子组件导出) import contents from './components/content'; 2.在父组件中注册子组件 data() { return { test:'0' }; }, components:{ 'v
-
vue非父子组件通信问题及解决方法
问题描述: 最近在做登录部分时遇到一个场景,当点击 "用户"按钮时,首先渲染login组件,在用户登录后直接跳转到用户信息界面(user组件).这里遇到了需要将login组件通过异步请求获得的用户信息传向 user组件,但是login和login组件不是父子组件,就暂称为兄弟组件吧. 简而言之,我要解决的就是兄弟组件之间的信息传递问题. //位于login.vue 中 export default { methods:{ login(){ this.$axios({ method: '
-
Vue中父组件向子组件通信的方法
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述.下面通过本文给大家分享Vue中父组件向子组件通信的方法,具体内容详情如下所示: props 组件实例的作用域是孤立的.子组件的模板中是无法直接调用父组件的数据. 可以使用props将父组件的数据传给子组件.子组件在接受数据时要显示声明props 看下面的例子 <div id="app"> <panda here='China'></panda> </div> <s
-
Vue 兄弟组件通信的方法(不使用Vuex)
项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下面简单介绍一下使用传统方法,实现父子组件通信的方法. 简单实例:我们在a组件中点击按钮,将信息传给b组件,从而使b组件弹出. 主要的思路就是:先子传父,在父传子 首先我们在 a.vue 组件中 ,给按钮botton绑定一个handleClick事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数. 示
-
Vue.js子组件向父组件通信的方法实例代码详解
一.场景描述: 曾经有个电商项目,其中有个"老带新"模块,而且该模块新增的入口很多,但是新增后展示效果还不一样,当时就考虑将新增的组件单独拿出来,其实就是一个子组件向父组同步数据的过程. 当然,背景不重要了,关键是看实现的方式. 二.场景展示效果 (PS:展示效果请忽略美感) 三.如何实现 注意:Vuejs架构通过vue-cli 3.X搭建的项目,版本无所谓. 1.先看下目录体系,下图子组件放在components文件夹内,模拟子组件为itemAdd.vue,父组件视图放在views文
-
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系. 父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢? 父子组件通信 根据vue中的文档可知, 组件的props属性用于接收父组件传递的信息. 而子组件想要向父组件传递信息, 可以使用$emit事件. 我们定义两个组件, 一个为父组件名为father, 另外一个为子组件child. 子组件通过props属性接收父组件传递的值, 这个值为fname, 是父组件的名字. 点击子组件的按钮, 触发toFather事件, 向父
-
vue子父组件通信的实现代码
之前在用vue写子父组件通信的时候,老是遇到问题!!! 子组件传值给父组件: 子组件:通过emit方法给父组件传值,这里的upparent是父组件要定义的方法 模板: <div v-on:click="switchViewBtn">切换视图</div> 在data中定义:switchStatus = true; 方法: switchViewBtn(){ let that=this; this.$emit("parentView",that.s
-
Vue.js 父子组件通信的十种方式
面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备技能.而且在面试当中也往往会问到关于 Vue 方面的各种问题,其中大部分面试官会问到如上这种问题. 最近一直在做 Vue项目代码层面上的优化,说实话,优化别人的代码真是件痛苦的事情,功能实现尚且不说,就说代码规范我就能再写出一篇文章来.真的是无规范不成方圆,规范这个东西太重要了!有点扯了,回到主题,咳
-
vue任意关系组件通信与跨组件监听状态vue-communication
众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好维护 provider 不可控 这个时候就该今天的主角 vue-communication 登场了! vue-communication介绍 他是一个可观测可调试的vue组件通信方案 任意关系组件可直接通信 支持跨组件监听数据变化 支持发送离线数据 安装 yarn add vue-communication // 或者 n
-
如何用Vue实现父子组件通信
一.父子组件的关系构成 本篇文章将要总结的是Vue中父子组件之间的通信方式. 那在vue中父子组件之间的关系是怎么构成的呢,或者说哪个组件可以称为是父组件,哪个组件又可以称为是子组件呢. 在我的理解中,父子组件的关系构成也比较简单. 使用vue-cli工具构建的项目中,我们经常会在一个组件中注册引用另外一个组件. Home.vue <template> <div class="home"> <p>这里是Home组件</p> </di
随机推荐
- 常见电子书格式及其反编译思路分析第1/3页
- 上海居住证办理 续办上海居住证全攻略
- Hadoop 中 HBase Shell命令的详解
- 天涯(tianya)bbs系统架构分析
- tomcat自定义Web部署文件中docBase和workDir的区别介绍
- asp.net UpdatePanel实现无刷新上传图片
- asp.net中资源文件的使用
- 用javascript实现gb2312转utf-8的脚本
- Javascript实现的StopWatch功能示例
- Visual Studio 2017 离线安装教程
- MySQL DBA教程:Mysql性能优化之缓存参数优化
- ASP下存储过程编写入门全接触第1/5页
- HTML5 js实现拖拉上传文件功能
- sqlserver 批量删除存储过程和批量修改存储过程的语句
- jQuery数组处理代码详解(含实例演示)
- jQuery使用EasyUi实现三级联动下拉框效果
- Python实现同时兼容老版和新版Socket协议的一个简单WebSocket服务器
- ThinkPHP独立分组使用的注意事项
- wxPython实现窗口用图片做背景
- Python实现模拟浏览器请求及会话保持操作示例