(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. zabbix日常监控NFS(新加一)

    有时候主机使用NFS文件挂载的方式来存储.备份.共享文件:但有时会出现断开的现象. 1.客户机现状 [root@tianxia6 ~]# df -h Filesystem Size Used Avai ...

  2. November 16th 2016 Week 47th Wednesday

    Success is falling nine times and getting up ten. 成功就是哪怕跌倒九次,也要在第十次爬起来. For most of us, we may choos ...

  3. LA 3938 动态最大连续区间 线段树

    思路很清晰,实现很繁琐.分析过程可以参考LRJ,自己的总结晚些放. #include <cstdio> #include <cstring> #include <algo ...

  4. Spring各版本源码下载

    spring framework 各版本源码下载地址 现在spring的源码下载地址真是不好找,这次终于找到了.记录一下,以帮助需要的朋友. https://github.com/spring-pro ...

  5. 2015 ICL, Finals, Div. 2【ABFGJK】

    [题外话:我......不补了......] 2015 ICL, Finals, Div. 2:http://codeforces.com/gym/100637 G. #TheDress[水] (st ...

  6. 问题:win10防火墙不能自动启动

    问题:win10防火墙不能自动启动 描述:Windows防火墙不能自动启动,每次开机要手动启动,打开service.msc,里面防火墙的启动类型为手动,按钮为灰色,不能更改为自动,怎么办? 解决方法: ...

  7. laravel框架之blade模板引擎

    ## 1.基本用法 ##情形1 $name = laravel5 <div class="title"> {{$name}} {{$name}}</div> ...

  8. BZ4326 运输计划

    Time Limit: 30 Sec Memory Limit: 128 MB Submit: 2132 Solved: 1372 Description 公元 2044 年,人类进入了宇宙纪元.L ...

  9. django操作多数据库

    django操作多数据库 1.    添加数据库路由分配文件 在项目文件夹里创建‘database_router’文件.将下面的代码复制到该文件里. from django.conf import s ...

  10. zoc 下载服务器上数据出现的问题

    zoc上有一个download的按钮能够将服务器上的数据下载下来,但是在下载过程中出现了错误 但是点击会出现下面的问题: 这个配置默认是采用ZMODEM文件传输协议 但是可以看出来,这个传输协议有点问 ...