在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 相关文章推荐
JavaScript中的null和undefined解析
Apr 14 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
AngularJS基础 ng-keypress 指令简单示例
Aug 02 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
Javascript 判断两个IP是否在同一网段实例代码
Nov 28 Javascript
VSCode中如何利用d.ts文件进行js智能提示
Apr 13 Javascript
JavaScript轮播停留效果的实现思路
May 24 Javascript
BootStrap模态框闪退问题实例代码详解
Dec 10 Javascript
Vue.js实现立体计算器
Feb 22 Javascript
js在HTML的三种引用方式详解
Aug 29 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&amp;mysql(六)
2006/10/09 PHP
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
PHP 加密解密内部算法
2010/04/22 PHP
php中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
thinkPHP5.1框架路由::get、post请求简单用法示例
2019/05/06 PHP
JavaScript 学习小结(适合新手参考)
2009/07/30 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
Move.js入门
2017/02/08 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
webpack v4 从dev到prd的方法
2018/04/02 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
python操作MySQL数据库的方法分享
2012/05/29 Python
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
python将ansible配置转为json格式实例代码
2017/05/15 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python中单线程、多线程和多进程的效率对比实验实例
2019/05/14 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python图形用户接口实例详解
2019/12/16 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
python绘图模块之利用turtle画图
2021/02/12 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
香港中原电器网上商店:Chung Yuen
2019/06/26 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
vue elementUI表格控制对应列
2022/04/13 Vue.js