vue 组件间的通信
(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 组件间的通信的更多相关文章
- vue组件间的通信
组件的定义: 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素, Vue.js 的编译器为它添加特殊功能.v ...
- 第四节:Vue表单标签和组件的基本用法,父子组件间的通信
vue表单标签和组件的基本用法,父子组件间的通信,直接看例子吧. <!DOCTYPE html> <html> <head> <meta charset=&q ...
- vue组件间通信六种方式(完整版)
本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $listeners和provide/inject,以 ...
- Vue组件间通信6种方式
摘要: 总有一款合适的通信方式. 作者:浪里行舟 Fundebug经授权转载,版权归原作者所有. 前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的 ...
- Vue组件间通信-Vuex
上回说到Vue组件间通讯,最后留了一个彩蛋~~~Vuex.Vuex是另一种组件通讯的方法,这节来说说Vuex(store仓库). 首先Vuex需要安装,安装的方式有很多,在这里就不一一细说了.我是通过 ...
- vuejs单一事件管理组件间的通信
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Vue 组件间传值
前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...
- Vue2不使用Vuex如何实现兄弟组件间的通信
在一些正规的大型项目的企业级开发过程中我们一般会引入Vuex来对Vue所有组件进行状态管理,可以轻松实现各组件间的通信.但是有时候做做自己的小项目,没有必要使用Vuex时,如何简单的实现组件间的通信? ...
- Vue组件间通信方式到底有几种
1. 前言 Vue的一个核心思想就是组件化.所谓组件化,就是把页面拆分成多个组件 (component),每个组件依赖的 CSS.JavaScript.模板.图片等资源放在一起开发和维护.组件是资源独 ...
随机推荐
- zabbix日常监控NFS(新加一)
有时候主机使用NFS文件挂载的方式来存储.备份.共享文件:但有时会出现断开的现象. 1.客户机现状 [root@tianxia6 ~]# df -h Filesystem Size Used Avai ...
- November 16th 2016 Week 47th Wednesday
Success is falling nine times and getting up ten. 成功就是哪怕跌倒九次,也要在第十次爬起来. For most of us, we may choos ...
- LA 3938 动态最大连续区间 线段树
思路很清晰,实现很繁琐.分析过程可以参考LRJ,自己的总结晚些放. #include <cstdio> #include <cstring> #include <algo ...
- Spring各版本源码下载
spring framework 各版本源码下载地址 现在spring的源码下载地址真是不好找,这次终于找到了.记录一下,以帮助需要的朋友. https://github.com/spring-pro ...
- 2015 ICL, Finals, Div. 2【ABFGJK】
[题外话:我......不补了......] 2015 ICL, Finals, Div. 2:http://codeforces.com/gym/100637 G. #TheDress[水] (st ...
- 问题:win10防火墙不能自动启动
问题:win10防火墙不能自动启动 描述:Windows防火墙不能自动启动,每次开机要手动启动,打开service.msc,里面防火墙的启动类型为手动,按钮为灰色,不能更改为自动,怎么办? 解决方法: ...
- laravel框架之blade模板引擎
## 1.基本用法 ##情形1 $name = laravel5 <div class="title"> {{$name}} {{$name}}</div> ...
- BZ4326 运输计划
Time Limit: 30 Sec Memory Limit: 128 MB Submit: 2132 Solved: 1372 Description 公元 2044 年,人类进入了宇宙纪元.L ...
- django操作多数据库
django操作多数据库 1. 添加数据库路由分配文件 在项目文件夹里创建‘database_router’文件.将下面的代码复制到该文件里. from django.conf import s ...
- zoc 下载服务器上数据出现的问题
zoc上有一个download的按钮能够将服务器上的数据下载下来,但是在下载过程中出现了错误 但是点击会出现下面的问题: 这个配置默认是采用ZMODEM文件传输协议 但是可以看出来,这个传输协议有点问 ...