一、props/$emit
父组件通过props
的方式向子组件传递数据,而通过$emit
子组件可以向父组件通信。
1. 父组件向子组件传值
prop
只可以从上一级组件传递到下一级组件(父子组件),即所谓的单向数据流。而且prop
只读,不可被修改,所有修改都会失效并警告。
栗子一:
子组件article.vue
如何获取父组件section.vue
的数据articles:['红楼梦', '西游记','三国演义']
//section父组件
<template>
<div class="section">
<com-article :articles="articleList"></com-article>
</div>
</template>
<script>
import comArticle from './article.vue'
export default{
name: 'HelloWorld',
components: { comArticle }
data(){
return {
articleList: ['红楼梦', '西游记','三国演义']
}
}
}
</script>
//article子组件
<template>
<div>
<span v-for="(item, index) in articles" :key="index">{{item}}</span>
</div>
</template>
<script>
export default{
props: ['articles']
}
</script>
2. 子组件向父组件传值
$emit
绑定一个自定义事件, 当这个语句被执行时, 就会将参数arg传递给父组件,父组件通过v-on监听并接收参数。
栗子二:
在上个例子的基础上, 点击页面渲染出来的ariticle的item, 父组件中显示在数组中的下标
//section父组件
<template>
<div class="section">
<com-article :articles="articleList" @onEmitIndex="onEmitIndex"></com-article>
<p>{{ currentIndex }}</p>
</div>
</template>
<script>
import comArticle from './article.vue'
export default{
name: 'HelloWorld',
components: { comArticle }
data(){
return {
currentIndex: -1,
articleList: ['红楼梦', '西游记','三国演义']
}
},
methods: {
onEmitIndex(idx) {
this.currentIndex = idx
}
}
}
</script>
//article子组件
<template>
<div>
<span v-for="(item, index) in articles" :key="index" @click="emitIndex(index)">{{item}}</span>
</div>
</template>
<script>
export default{
props: ['articles'],
methods: {
emitIndex(index) {
this.$emit('onEmitIndex', index)
}
}
}
</script>
二、$children / $parent
当需要父组件直接访问子组件,子组件直接访问父组件,或者是子组件访问根组件。可以使用$children / $parent
父组件访问子组件:使用$children或$refs
-
$children
可以访问该父组件的所有子组件,返回的是一个数组类型,包含了所有子组件对象,因此可以进一步访问子组件的属性、方法等 -
$refs
可以获取一个特定的子组件,$refs和ref指令通常是一起使用的。首先给某一个子组件设置ref属性
绑定一个特定的ID。然后通过this.$refs.ID
就可以访问到该子组件。
子组件访问父组件:使用$parent
,返回的是一个对象
三、provide/ inject
provide/ inject
是vue2.2.0新增的api, 简单来说就是父组件中通过provide来提供变量
, 然后再子组件中通过inject来注入变量
。
不论子组件嵌套有多深, 只要调用了inject , 就可以注入provide中的数据,而不局限于只能从当前父组件的props属性中获取数据
栗子:
假设有三个组件: A.vue、B.vue、C.vue 其中 C是B的子组件,B是A的子组件
//A.vue
<template>
<div>
<comB></comB>
</div>
</template>
<script>
import comB from '../components/test/comB.vue'
export default {
name: "A",
//父组件用provide定义变量
provide: {
for: "demo"
},
components:{
comB
}
}
</script>
//B.vue
<template>
<div>
{{demo}}
<comC></comC>
</div>
</template>
<script>
import comC from '../components/test/comC.vue'
export default {
name: "B",
//子组件用inject注入该变量
inject: ['for'],
data() {
return {
demo: this.for
}
},
components: {
comC
}
}
</script>
//C.vue
<template>
<div>
{{demo}}
</div>
</template>
<script>
export default {
name: "C",
inject: ['for'],
data() {
return {
demo: this.for
}
}
}
</script>
四、事件总线eventBus
eventBus
又称为事件总线,在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心,可以向该中心注册发送事件或接收事件, 所以组件都可以通知其他组件。eventBus也有不方便之处, 当项目较大,就容易造成难以维护的灾难
1. 初始化
创建一个事件总线并将其导出, 以便其他模块可以使用或者监听它.
import Vue from 'vue'
export const EventBus = new Vue()
2. 发送事件和接收事件
假设有两个组件: additionNum 和 showNum
, 可以是兄弟组件也可以是父子组件;这里以兄弟组件为例:
<template>
<div>
<show-num-com></show-num-com>
<addition-num-com></addition-num-com>
</div>
</template>
<script>
import showNumCom from './showNum.vue'
import additionNumCom from './additionNum.vue'
export default {
components: { showNumCom, additionNumCom }
}
</script>
//addtionNum.vue 中发送事件
<template>
<div>
<button @click="additionHandle">+加法器</button>
</div>
</template>
<script>
import {EventBus} from './event-bus.js'
export default {
data(){
return{
num:1
}
},
methods:{
additionHandle(){
EventBus.$emit('addition', {
num: this.num++
})
}
}
}
</script>
//showNum.vue 中接收事件
<template>
<div>计算和: {{count}}</div>
</template>
<script>
import { EventBus } from './event-bus.js'
export default {
data() {
return {
count: 0
}
},
mounted() {
EventBus.$on('addition', param => {
this.count = this.count + param.num;
})
}
}
</script>
3. 移除事件监听者
import { eventBus } from 'event-bus.js'
EventBus.$off('addition', {})
五、Vuex
1)Vuex介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.
Vuex 解决了多个视图依赖于同一状态
和来自不同视图的行为需要变更同一状态
的问题,将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上
2)Vuex各个模块
- state:用于数据的存储,是store中的唯一数据源
- getters:如vue中的计算属性一样,基于state数据的二次包装,常用于数据的筛选和多个数据的相关性计算
- mutations:类似方法,改变state数据的唯一途径,且不能用于处理异步事件
- actions:类似于mutation,用于提交mutation来改变状态,而不直接变更状态,可以包含任意异步操作
- modules:类似于命名空间,用于项目中将各个模块的状态分开定义和操作,便于维护
六、localStorage / sessionStorage
这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。 通过window.localStorage.getItem(key)
获取数据 通过window.localStorage.setItem(key,value)
存储数据
注意用JSON.parse() / JSON.stringify()
做数据格式转换 localStorage / sessionStorage
可以结合vuex, 实现数据的持久保存,同时使用vuex解决数据和状态混乱问题.