子 传父, 父传子, 全局事件总线$bus(全能), vuex ,插槽
1.子传父
子组件通过$emit抛出自定义事件传递数据
子组件
<template>
<div @click="aaa"></div>
</template>
<script>
export default {
methods: {
aaa () {
// this.$emit('自定义事件名', 传过去参数数据) 子组件通过抛出事件
this.$emit('son', {a: 1, b: 2})
}
}
}
</script>
父组件
<template>
<div @son="bbb"></div>
</template>
<script>
export default {
methods: {
bbb (obj) {
console.log(obj) // {a:1, b:2}
}
}
}
</script>
2 父传子
用props传值
父组件
<template>
<div :father = 'son'></div>
</template>
<script>
export default {
data(){
return {
son: '组件'
}
}
}
</script>
子组件
<script>
export default {
//接受父组件
props: ['father']
data () {
return {
name: ''
}
},
methods: {
this.name = this.father
console.log(this.name) // 子组件视图中 直接{{father}} 就可解析出值 组件
}
}
</script>
3 事件总线
任意组件通过事件组件传值
第一步:在main.js中 给Vue原型上补充$eventBus属性
Vue.prototype.$eventBus = new Vue()
第二步:任意组件发布事件
this.$ eventBus.$ emit(‘自定义事件名’,参数)
this.$eventBus.$emit('aaa',{a:1, b:2})
第三步: 任意组件监听 (谁监听谁能拿到传递过来的值)
this.$ eventBus.$ on(‘监听的事件名’,事件处理函数)
this.$eventBus.$on('aaa',(obj) => {
console.log(obj) // {a:1, b:2}
})
4 vuex
vuex的作用是解决多组件状态共享的问题。
它是独立于组件而单独存在的,所有的组件都可以把它当作一座桥梁来进行通讯。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
// 各种配置项
// state 就相当于vue组件中的data。它用来存放整个vue项目中公共的数据
// 这个数据,在所有的vue组件中都可以访问到
state: {
num: 101,
count: 21.5,
person: {
name: '张三'
}
},
mutations: {
// 下面定义了一个mutation。本质就是一个函数
// 特殊之处:在定义函数时,第一个参数就表示当前vuex中的state
// 直接在此函数内部去修改state.
// 在调用这个函数时,第一个参数不要传入。
// 1.不带参数的mutation
mAdd(state){
// 这个mutation的作用就是让state中的num加1
state.num++
},
// 2. 带参数的mutation
mAddN(state, n){
// 这个mutation的作用就是让state中的num加 n
// 这个n是需要额外传入的
state.num = state.num + n
}
}
});
直接获取
<button @click="Add">+1</button>
methods:{
methods: {
add () {
// 直接修改state,不推荐
// this.$store.state.num++
// 调用了Vuex.store配置项中的mutations对象中的名为mAdd的方法。
// 不需要传入任何参数。
this.$store.commit("mAdd")
},
addN () {
// 调用一个带参数的mutation
this.$store.commit('mAddN', 10)
}
}
}
通过映射
<script>
// 在组件中通过映射的方式来使用vuex中的mutations
// 1. 引入工具函数
import { mapMutations } from 'vuex'
// mapMutations 是一个函数,在vue中定义的。
// mapMutations(['mAdd', 'mAddN'])的返回值是一个对象
// 这个对象类似于{mAdd:function(){}, mAddN:function(){}}
// 2. 在methods中 插入 映射函数的结果
export default {
name: 'SubItem',
// 下面的代码中,相当于methods中定义了 4个方法
// sub,mAdd,mAddN, test
methods: {
sub () {
this.$store.state.num--
},
...mapMutations(['mAdd', 'mAddN']),
test () {
// 由于上面的mAdd并映射成方法,所以这里可以直接加this.来访问。
// this.mAdd()
this.mAddN(100)
}
}
}
</script>