1.组件间传值
父组件向子组件传值:
子向父传递数据,通过触发事件:
网页-兄弟传值:
兄弟组件之间的传值和父子组件之间的传值非常相似,都是通过$emit;
原理是:vue一个新的实例,类似于一个站,连接着两个组件,也就是一个中央事件总线;
下面是一个bus实例:
1、创建一个firstChild组件,引入bus,接着一个按绑定数据传输事件:
我们通过一个$emit自定义一个事件,并传递数据;
$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。
下面是另一个组件,引入bus实例,通过一个p标签接收数据:
这个组件的mounted里,我们监听了userDefinedEvent事件,并把传递过来的事件通过
o
n
监
听
回
调
函
数
;
o
n
:
监
听
当
前
实
例
上
的
自
定
义
事
件
(
此
处
当
前
实
例
为
b
u
s
)
。
事
件
可
以
由
o
n
:
监
听
当
前
实
例
上
的
自
定
义
事
件
(
此
处
当
前
实
例
为
b
u
s
)
。
事
件
可
以
由
o
n
:
监
听
当
前
实
例
上
的
自
定
义
事
件
(
此
处
当
前
实
例
为
b
u
s
)
。
事
件
可
以
由
e
m
i
t
触
发
,
回
调
函
数
会
接
收
所
有
传
入
事
件
触
发
函
数
(
on监听回调函数; o n : 监 听 当 前 实 例 上 的 自 定 义 事 件 ( 此 处 当 前 实 例 为 b u s ) 。 事 件 可 以 由 on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由emit触发,回调函数会接收所有传入事件触发函数(
on监听回调函数;on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由emit触发,回调函数会接收所有传入事件触发函数(emit)的额外参数。
小程序兄弟间传值:
2.组件全局数据传递:
-
通过Vue的原型共享数据
//在main.js中 import Vue from 'vue' Vue.prototype.baseUrl = "www.google.com" //调用,在组件中 this.baseUrl
-
通过globalData共享数据
在App.vue中:
globalData:{ base: "www.360.com" }
在组件中: console.log(getApp().globalData.base)
-
vuex
-
本地存储
3.插槽
4.生命周期
应用:
页面:
组件: