vue2.0父子组件通信以及同级组件通信
1.父向子通信
父组件为singer.vue.子组件为list-view.vue.需要把歌手的数据传给子组件。则绑定 :data = 'singers' ,singers为父组件的值。data为子组件接收值的名称
子组件采用props的方式接收、data 里面就是父组件传过来的的值了。
值得注意的是。当定义子组件的值有参数时,props里面的default需要向data函数一样写
2 子组件向父组件派发事件
(1)子组件做了一个点击事件 selectItem(item),并传递了一个值
(2)methods里面。这个事件采用$emit的方式传给父组件,并把值也传出去
(3)然后父组件@select="selectSinger"这样来接收子组件派发来的事件里面默认带传过来的参数
(4)然后父组件的methods里面就可以写这个事件具体用来做什么的了。并且其参数 也能用
3 兄弟组件互相通信
兄弟组件顾名思义就是两个同级组件。有时候也需要通信。那么简单的我们可以这样来操作
比如文中这样,button和nav分别为不同的组件,需要 点击button的时候,切换展示与隐藏nav。
那么我们就要用到兄弟组件通信来操作
(1)首先,需要创建一个单独的空.js文件。比如 这样
注册一个空的 Vue 实例,作为 ‘中转站’
(2)在btn按钮上绑定一个点击事件
(3)那么我们就可以在事件里面来写这个事件。 当然在写之前要先引入这个’ 中转站‘
(4)
在需要接收这个事件的nav组件
我们可以这样操作。也是需要 先引入那个‘中转站’eventBus.然后接收事件。注意此操作是在mounted(){}这个生命周期里进行的。
vue2.0父子组件通信以及同级组件通信的更多相关文章
- vue2.0 父子组件之间的通信问题
概要: 父组件向子组件通信:props属性 子组件向父组件通信:$emit()触发事件,$on()监听事件 在 vue 1.0 中可以使用$dispatch 和 $broadcast来实现 向上派发事 ...
- vue2.0 父子组件数据传递prop
vue的一个核心概念就是组件,而组件实例的作用域是孤立的,所以组件之间是不能直接引用其他组件的数据的.极端点举例来说,就是可以在同一个项目中,每一个组件内都可以定义相同名称的数据. data () { ...
- vue2.0父子组件通信的方法
vue2.0组件通信方法:props传值和emit监听.(.sync方法已经移除.详情请点击)(dispatch-和-broadcast方法也已经废弃) props方法传值:Props 现在只能单项传 ...
- vue2.0父子组件以及非父子组件通信传参详解
1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg" ...
- vue2.0父子组件之间通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- vue2.0 父子组件通信 兄弟组件通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent> <child :child-com="content"></chil ...
- vue2.0父子组件以及非父子组件通信
官网API: https://cn.vuejs.org/v2/guide/components.html#Prop 一.父子组件通信 1.父组件传递数据给子组件,使用props属性来实现 传递普通字符 ...
- Vue2.0父子组件间事件派发机制
从vue1.x过来的都知道,在vue2.0中,父子组件间事件通信的$dispatch和$broadcase被移除了.官方考虑是基于组件树结构的事件流方式实在是让人难以理解,并且在组件结构扩展的过程中会 ...
- Vue2.0父子组件之间和兄弟组件之间的数据交互
熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结 ...
随机推荐
- python openpyxl 简单使用
1. 加载excel import openpyxl from openpyxl.utils import get_column_letter,column_index_from_string fro ...
- 修改 git log
修改最新的log git commit --amend git push -f #强制推送 修改历log git rebase -i HEAD~2 pick 1f639c0 222pick a8aef ...
- python 字符串方法及列表,元组,字典(一)
字符串 str 注: 若想要保持单引号和双引号为字符串的一部分 1)单双引号交替使用, 2)使用转义字符\ 3)成对三个引号被存在变量里 二.字符串详细用法 字符串的单个取值例 p_1=”hello” ...
- Taro 压缩图片api
Taro API里面没有写支持compressImage,ts提示也是,开发者工具提示暂时不支持此API调试,请使用真机进行开发.这是因为Taro这个库没有把新的api加上,其实还是调用了wx.com ...
- bio,nio,aio的区别 select,poll,epoll的区别
先了解一些基本概念,什么是socket?什么是I/O操作 unix(like)世界里,一切皆文件,而文件是什么呢?文件就是一串二进制流而已,不管socket,还是FIFO.管道.终端,对我们来说,一切 ...
- ESP8266内置的定时器库--Ticker库
Ticker的功能非常简单,就是规定时间后调用函数 总体上,根据功能可以把方法分为两大类: 定时器管理方法: 定时器启用方法: detach() 停止定时器 active() 定时器是否 ...
- 【ZJOJ5186】【NOIP2017提高组模拟6.30】tty's home
题目 分析 如果直接求方案数很麻烦. 但是,我们可以反过来做:先求出所有的方案数,在减去不包含的方案数. 由于所有的路径连在一起, 于是\(设f[i]表示以i为根的子树中,连接到i的方案数\) 则\( ...
- PHP基础教程 php 网络上关于设计模式一些总结
1.单例模式 单例模式顾名思义,就是只有一个实例.作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统提供这个实例. 单例模式的要点有三个: 一是某个类只能有一个实例; 二 ...
- Linux基础教程 linux下使用find命令根据系统时间查找文件用法
LinuxFind 兄弟连Linux培训 总结这些时间戳包括 复制代码代码如下: mtime 文件内容上次修改时间 atime 文件被读取或访问的时间 ctime 文件状态变化时间 mtime 和 ...
- 【Leetcode】整数反转
题解参考:https://leetcode-cn.com/problems/reverse-integer/solution/zheng-shu-fan-zhuan-by-leetcode/ 复杂度分 ...