(1)props:用于父组件向子组件传递消息

使用方法:

在父组件中,使用子组件时,<Child v-bind:data="data"/>,通过v-bind把子组件需要的数据传递给子组件;

在子组件中通过props来接受传过来的数据,常用写法:props:['data',......]/props:{data:dataType,.....}

举例:

(2)自定义事件:用于子组件向父组件传递消息

使用方法:

在父组件中,对子组件的标签绑定一个自定义的事件监听,<Child @todo="todo"/>;

在子组件中通过 vm.$emit('todo',data),来触发绑定在子组件上的事件,也即触发定义在父组件中的自定义事件,从而把data从子组合传递到父组件

举例:

(3)solt 标签(插槽):用于父组件向子组件传递标签数据

使用方法:

子组件:Child.vue

<template>
<div>
<slot name="xxx">不确定的标签结果1</slot>
<div>子组件中确定的标签结构</div>
<slot name="yyy">不确定的标签结果2</slot>
</div>
</template>

父组件:Parent.vue

<Child>
<div slot="xxx">xxx处对应的标签结构</div>
<div slot="yyy">yyy处对应的标签结构</div>
</Child>

相当于,子组件中的slot标签知识占个位置,里边的内容由父组件中对应的内容来决定

(4)PubSub库:可以在任意组件间互相传递消息

1>安装:npm install pubsub-js

2>引入:import PubSub from “pubsub-js”;

3>在需要的组件中订阅和取消订阅:

如:在A组件中,发布一个消息:

PubSub.publish('name',data);

在B组件中,订阅/监听/接受这个消息 :

PubSub.subscribe('name',(msg,data)=>{

//可以对传过来的data进行处理

})

注意:A、B组件均需要引入PubSub库

vue 组件间的通信的更多相关文章

  1. vue组件间的通信

    组件的定义: 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.v ...

  2. 第四节:Vue表单标签和组件的基本用法,父子组件间的通信

    vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...

  3. vue组件间通信六种方式(完整版)

    本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...

  4. Vue组件间通信6种方式

    摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...

  5. Vue组件间通信-Vuex

    上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...

  6. vuejs单一事件管理组件间的通信

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue 组件间传值

    前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...

  8. Vue2不使用Vuex如何实现兄弟组件间的通信

    在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...

  9. Vue组件间通信方式到底有几种

    1. 前言 Vue的一个核心思想就是组件化.所谓组件化,就是把页面拆分成多个组件 (component),每个组件依赖的 CSS.JavaScript.模板.图片等资源放在一起开发和维护.组件是资源独 ...

随机推荐

  1. Log4net 使用之 日期字段格式化

    Log4net 是.Net下一个非常优秀的开源日志记录组件.log4net记录日志的功能非常强大.它可以将日志分不同的等级,以不同的格式,输出到不同的媒介. 之前Log4net的日期字段Data一直采 ...

  2. 我的Java之旅——第一个Java程序

    在简单的看了一点Java的基本内容后,我开始尝试写自己的第一个Java程序.由于某些原因,学校官方的教务APP看不了自己这学期的平均绩点,就想着自己动手,写一小段代码,算一下自己的平均绩点.程序的功能 ...

  3. php 中使用cURL发送get/post请求,上传图片,批处理

    cURL是利用url语法规定传输文件和数据的工具.php中有curl拓展,一般用来实现网络抓取,模拟发送get   post请求,文件上传. 在php中建立curl的基本步骤如下: 1 初始化     ...

  4. linux块设备缓存bcache

    1 Bcache介绍Bcache是一种缓存技术,它是根据SSD的特性设计的,由于SSD的随机读写速度要比普通硬盘的随机读写快N多倍,但是一般SSD的容量小且贵,当然土豪除外,所以我们可以综合SSD的读 ...

  5. rimraf命令 递归删除目录所有文件

    使用webpack build文件项目时每次都会生成一个dist目录,有时需要把dist目录里的所以旧文件全部删掉, 除了可以使用rm -rf /dist/命令删除外,还可以使用rimraf /dis ...

  6. 到底该用img还是background-image?

    在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片.这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式实现,哪种更好呢? 一般情况下,可能就是 ...

  7. JQuery Mobile+JS实现智能浮动定位导航条

    实现原理 主要用到几个知识点: 什么是scrollTop? CSS position定位 判断是否为IE6浏览器 元素相对于窗口的距离 原理:1,浏览器向下滚动时,当document的scrollTo ...

  8. BZOJ4891:[TJOI2017]龙舟(Pollard-Rho,exgcd)

    Description 加里敦大学有一个龙舟队,龙舟队有n支队伍,每只队伍有m个划手,龙舟比赛是一个集体项目,和每个人的能力息息相关,但由于龙舟讲究配合,所以评价队伍的能力的是一个值c = (b1*b ...

  9. ethers.js-2-wallets and signers

    Application Programming Interface (API) Wallets and Signers A Wallet manages a private/public key pa ...

  10. Python的编码注释【转】

    格式有多种,但必须有coding:[编码]或者coding=[编码],如: # -*- coding:utf-8 -*- #  coding:utf-8 # coding=utf-8 转自:https ...