目录
2.1.父组件向子组件传值（用：属性名发送参数和props接收参数）
2.2.子组件向父组件传值（用$emit发送参数和@方法名接收参数）
2.3.兄弟组件相互传值(自定义Vue实例，用$emit发送参数和$on接收参数)
4.2.Mutations（同步修改state中数据的方法集合）
4.3.Actions（异步任务，调用Mutations中的方法）
4.4.Getters（包装Store中的数据，不会修改数据）
1.Vuex概述
是实现组件全局状态数据管理的一种机制，可以方便的实现组件之间数据的共享
好处
- 管理共享的数据，易于开发和后期维护
- 共享高效率，能够提高开发效率
- 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步
2.组件之间共享数据的方式
Vue.js为最常用的两个指令v-bind和v-on提供了缩写方式。
v-bind指令可以缩写为一个冒号。
v-on指令可以缩写为@符号
父组件向子组件传值：v-bind属性绑定
子组件向父组件传值：v-on 事件绑定
2.1.父组件向子组件传值（用：属性名发送参数和props接收参数）
//父组件调用子组件，父组件调用子组件的时候 绑定动态属性
<template>
<HeaderTest :isTest1="isTest1"/>
</template>
<script>
import HeaderTest from "@/components/HeaderTest";
export default {
components: {
HeaderTest
},
data() {
return {
isTest1: true,
}
}
}
</script>
//子组件HeaderTest.vue，在子组件里面通过 props接收父组件传过来的数据，通过传递不同的数据类型，给不同的默认值，例如：Boolean:false,String:"",Array:() => [],Object:() => {}
export default {
props: {
isTest1: {
type: Boolean,
default: false
},
isTest2: {
type: String,
default: ""
},
isTest3: {
type: Array,
default: () => []
},
isTest4: {
type: Array,
default: () => []
},
isTest5: {
type: Object,
default: () => {}
}
},
}2.2.子组件向父组件传值（用$emit发送参数和@方法名接收参数）
//子组件HeaderTest.vue通过$emit方法向父组件传值
<script>
methods: {
test1(){
this.$emit("cancel", false);
},
test2(){
this.$emit("finish", ["1","2"]);
},
}
</script>
//父组件通过@方法名接收
<template>
<HeaderTest :isTest1="isTest1"
@cancel="cancel1"
@finish="finish1"
/>
</template>
<script>
methods: {
cancel1(data){
//这里接收子组件传递过来的值;
console.log(data);
},
finish1(data){
console.log(data);
},
}
</script>2.3.兄弟组件相互传值(自定义Vue实例，用$emit发送参数和$on接收参数)
Vue 没有直接子对子传参的方法，建议将需要传递数据的子组件，都合并为一个组件。如果一定需要子对子传参，可以先从传到父组件，再传到子组件。
或者通过eventBus或vuex（小项目少页面用eventBus，大项目多页面使用 vuex）传值
1.专门定义一个新的vue实例的EventBus.js文件用于传递数据并导出
import Vue from 'vue';
export default new Vue();
2.组件A定义传递的方法名和传输内容，点击事件或钩子函数触发eventBus.emit事件
<script>
import eventBus from "./js/EventBus.js";
export default {
methods: {
emitToB() {
eventBus.$emit("eventFromA","要向组件B传递的参数");
}
}
}
</script>
3.组件B接收参数
注意：eventBus是一个另一个新的Vue实例，区分两个this所代表得vue实例
<script>
import eventBus from "./js/EventBus.js";
export default {
data(){
return {
test: '',
}
},
mounted(){
this.getEventData();
},
methods: {
getEventData() {
const that = this;//这里this指的是本项目的vue实例，用that接收，与eventBus的vue区分
eventBus.$on("eventFromA",function(val){
that.test = val;
});
}
}
}
</script>3.Vuex的引用
3.1.安装vuex依赖包
npm install vuex --save3.2.导入vuex包
import Vuex from "vuex";
Vue.use(Vuex);3.3.创建store对象
const store = new Vuex.Store({
state: {count: 0}
});
export default store;3.4.将store对象挂载到vue实例中
在main.js中
import store from "./store";
new Vue({
store,
render: h => h(App)
}).$mount("#app");3.5.多模块化使用
一般都是多模块化使用，例如：
//在src的store文件夹下，新建一个index.js文件，内容如下：
import Vue from "vue";
import Vuex from "vuex";
import test from "./modules/test";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
test,
}
});
export default store;
//在store文件夹下新建modules文件夹，然后再新建一个test.js的文件，内容如下：
const state = {
num: 0
}
const mutations = {
addN(state, step){
state.num+=step;
},
}
const actions = {
addNAsync({commit}, step){
setTimeout(() => {
commit('addN', step)
}, 1000)
},
}
const getters = {
showNum(state){
return "当前是几？"+state.num;
}
}
export default {
namespaced: true,
state,
mutations,
actions,
getters
};
//在src下的store文件夹下，新建一个index.js文件
import Vue from "vue";
import Vuex from "vuex";
import test from "./modules/test";
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
test,
}
});
export default store;4.vuex的四大核心概念以及使用示例
用多模块化举例，开启了namespaced:true
4.1.State（共享常量或者变量）
提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储
const state = {
num: 0
}组件调用State中数据方式：
第一种直接调用方式：
//js中使用this.$store.state.<模块名称>.<全局数据名称>
this.$store.state.test.num
//在template中
{{ $store.state.test.num }}第二种辅助函数方式：
1.从vuex中按需导入mapState函数
import {mapState} from "vuex";
2.通过刚才导入的mapState函数，将当前组件所需要的的全局数据，映射为当前的computed计算属性
computed: {
...mapState({
"num": state => state.test.num,
}),
},
//如果没有模块化
computed: {
...mapState(["num"]),
},
3.js使用
this.num4.2.Mutations（同步修改state中数据的方法集合）
Mutations用于变更Store中state的数据，只有通过mutations中的方法才能修改state中的数据
const mutations = {
addN(state, step){
state.num+=step;
},
}
组件调用Mutations中方法的方式：
第一种直接调用方式：
methods: {
addNum(){
this.$store.commit('test/addN',3);
},
}第二种辅助函数方式
1.从vuex中按需导入mapMutations函数
import {mapMutations} from "vuex";
2.映射为当前的methods函数
methods: {
...mapMutations({
"addN":"test/addN",
}),
},
//如果没有模块化
...mapMutations(['addN']),
3.js使用
this.addN(3)4.3.Actions（异步任务，调用Mutations中的方法）
触发actions异步任务时携带参数
const actions = {
addNAsync({commit}, step){
setTimeout(() => {
commit('addN', step)
}, 1000)
},
}组件调用actions中方法的方式：
第一种直接调用方式：
methods: {
addNAsyncNum(){
this.$store.dispatch('test/addNAsync',3);
},
}第二种辅助函数方式：
1.从vuex中按需导入mapActions函数
import {mapMutations} from "vuex";
2.映射为当前的methods函数
methods: {
...mapActions({
"addNAsync":"test/addNAsync",
}),
},
//如果没有模块化
...mapActions(['addNAsync']),
3.js使用
this.addNAsync(3)4.4.Getters（包装Store中的数据，不会修改数据）
Getter用于对Store中的数据进行加工处理形成新的数据，不会修改store中的数据
const getters = {
showNum(state){
return "当前是几？"+state.num;
}
} 组件调用getters中方法的方式：
第一种直接调用方式：
//js中使用this.$store.getters.<模块名称>.<全局方法名称>
this.$store.getters['test/showNum'];第二种辅助函数方式：
1.从vuex中按需导入mapGetters函数
import {mapGetters} from "vuex";
2.通过刚才导入的mapGetters函数，将当前组件所需要的的全局方法，映射为当前的computed计算属性
computed: {
...mapGetters({
"showNum": "test/showNum",
}),
},
或者(引入多个模块的getters时，则需要写多个mapGetters)
computed: {
...mapGetters('test', {
showNum: 'showNum'
}),
},
//如果没有模块化
computed: {
...mapGetters(["showNum"]),
},
3.js使用
this.showNum
扫一扫
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
