在vue-cli中组件通信的方法


Posted in Javascript onDecember 16, 2017

本文介绍了在vue-cli中组件通信的方法,分享给大家。具体如下:

vue组件之间的通信包括三种:

1.父组件向子组件通信
2.子组件向父组件通信
3.同级组件之间的通信

一.父传子组件通信

在vue-cli中组件通信的方法

拿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'
  })
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的模态div层弹出效果
Aug 21 Javascript
js最简单的拖拽效果实现代码
Sep 24 Javascript
iframe里的页面禁止右键事件的方法
Jun 10 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
jQuery源码解读之removeAttr()方法分析
Feb 20 Javascript
js检测判断日期大于多少天的方法
May 04 Javascript
jQuery使用$.ajax进行即时验证的方法
Dec 08 Javascript
理解AngularJs指令
Dec 10 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
canvas实现图像放大镜
Feb 06 Javascript
详解node child_process模块学习笔记
Jan 24 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 #Javascript
EasyUI的DataGrid绑定Json数据源的示例代码
Dec 16 #Javascript
使用Electron构建React+Webpack桌面应用的方法
Dec 15 #Javascript
vue给input file绑定函数获取当前上传的对象完美实现方法
Dec 15 #Javascript
微信小程序左右滑动的实现代码
Dec 15 #Javascript
浅析JavaScript中的特殊数据类型
Dec 15 #Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 #Javascript
You might like
PHP MSSQL 存储过程的方法
2008/12/24 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
php实现RSA加密类实例
2015/03/26 PHP
超强多功能php绿色集成环境详解
2017/01/25 PHP
Smarty模板语法详解
2019/07/20 PHP
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
2014/10/17 Javascript
js实现全国省份城市级联下拉菜单效果代码
2015/09/07 Javascript
javascript对象的创建和访问
2016/03/08 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
2017/03/08 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
jquery.pager.js分页实现详解
2019/07/29 jQuery
python WindowsError的错误代码详解
2017/07/23 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python实现直播推流效果
2019/11/26 Python
如何提高python 中for循环的效率
2020/04/15 Python
python模拟斗地主发牌
2020/04/22 Python
django 模版关闭转义方式
2020/05/14 Python
基于python代码批量处理图片resize
2020/06/04 Python
利用python 下载bilibili视频
2020/11/13 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
教师批评与自我批评总结
2014/10/16 职场文书
劳模先进事迹材料
2014/12/24 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
个人的事迹材料怎么写
2019/04/24 职场文书
Python实战之用tkinter库做一个鼠标模拟点击器
2021/04/27 Python
frg-100简单操作(设置)说明
2022/04/05 无线电