Vue常用传参方法
1.自定义事件 $emit 🥗
// 父
<Son @自定义的事件名="子触发自定义事件的回调（接收子传上来的数据）" />
// 子
<button @click="goFather"></button>
--- 子先触发一个事件，在调用this.$emit
methods:{
goFather(){
this.$emit('自定义的事件名',传值1，传值2，...)
}
}
2.父传子 props 🥩
// 父在子组件身上传输数据
<Son fatherData="父亲的值" :fatherMethod="goSon(可传属性与方法)" />
// 子接收 props
第一种方式： props：['fatherData','fatherMethod']
第二中方式： props：{
fatherData:{
type:String // 传入过来的数据类型限定
required：true // 是否为必传值
}
}、
3.父获取子身上的值与方法 ref 🍱
// 子身上设置ref
<Son ref="mySon" />
// 父用this.$refs
mounted(){
this.$refs.mySon.(属性、方法....)
}
4.父子间互相获取对方的值（$parent,$children）🌍
// 父获取儿子 $children 注意：获取的师数组
this.$children[0].(属性、方法....)
// 儿子获取父 $parent
this.$parent.(属性、方法....)
5.全局事件总线-兄弟之间互相传值 $bus 🥝
// 首先 全局安装$bus
new Vue({
......
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
},
......
})
// 本组件的兄弟
method:{
goBrother() {
this.$bus.$emit("brother", "我是你兄弟");
},
}
// 本组件
mounted() {
this.$bus.$on("brother", (data) => {
console.log(data);
}); // 第二个参数是一个回调
},
// $off 用$off('xxx')去解绑当前组件所用到的事件,一般使用在beforeDestroy钩子中
beforeDestroy() {
this.$bus.$off("brother");
},
6.vuex 无死角各种花式传值都无问题
--以上为vuex关系逻辑图--
vuex总共有五个属性：Actions, Mutations, State, Getters, modules;
6.1.1 Actions 🥮
vuex中actions一般用来处理异步操作，最主要的就是发起ajax请求数据，此处一般用context接收$store,里面包含了调用vuex的所有方法；
// vuex中的actions写法示例：
actions: {
changeName(context（$store）, data（接收调用者的传参）) {
context.commit('changeName', data)
}
}
6.1.2 Mutations 🥫
vuex中mutations一般是直接修改state数据的地方，用commit调用，里面写的函数方法接收到的第一个参数就是state数据；
mutations: {
changeName(state（state储存的数据）, data（actions里面传过来的值）) {
state.name = data
}
},
6.1.3 State 🥞
vuex中state里面使用来储存数据；
state: {
username: "vuex"
},
6.1.4 Getters 🍜
vuex中getters主要是简化数据结构，处理一些较复杂的数据加工等;
getters: {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
name: state => state.user.userInfo.username,
userId: state => state.user.userInfo.userId,
avatar: state => state.user.userInfo.staffPhoto
}
6.1.5 modules 🌵
vuex中方modules,模块，在项目较为复杂时需要独立功能的数据独立存储。这是就需要使用modules;
// 每个modules里面的独立模块都有完整的vuex属性；
modules: {
app,
settings,
user
},
辅助函数: mapActions, mapMutations, mapState, mapGetters;
使用辅助函数，首先第一步都是导入辅助函数方法：import { mapActions,... } from "vuex";
6.2.1 mapActions 🍑
mapActions用于生成调用actions的方法，即是调用actions中的函数；
methods:{
//靠mapActions生成：incrementOdd、incrementWait（对象形式）
...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
//靠mapActions生成：incrementOdd、incrementWait（数组形式）
...mapActions(['jiaOdd','jiaWait'])
}
6.2.2 mapMutations 🍇
mapMutations用于生成调用mutations的方法，即是调用mutations中的函数；
methods:{
//靠mapActions生成：increment、decrement（对象形式）
...mapMutations({increment:'JIA',decrement:'JIAN'}),
//靠mapMutations生成：JIA、JIAN（对象形式）
...mapMutations(['JIA','JIAN']),
}
*6.2.3 mapState 🥜
mapState用于我们映射state中的的数据；
computed: {
//借助mapState生成计算属性：sum、school、subject（对象写法）
...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成计算属性：sum、school、subject（数组写法）
...mapState(['sum','school','subject']),
},
6.2.4 mapGetters 🍀
mapGetters用于我们映射getters中的数据为计算属性；
computed: {
//借助mapGetters生成计算属性：bigSum（对象写法） =》对象写法可以重命名，键是重新取名；
...mapGetters({bigSum:'bigSum'}),
//借助mapGetters生成计算属性：bigSum（数组写法）
...mapGetters(['bigSum'])
},
其他常用
6.3.1 namespaced 🍓
namespaced命名空间，是为了保证每个模块的高封闭性；
export default {
namespaced: true, // 值为Boolean值；
}
开启命名空间后，调用方式的转变；
- 开启命名空间后，组件中读取state数据；
//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']),
- 开启命名空间后，组件中读取getters数据;
//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])
- 开启命名空间后，组件中调用dispatch;
//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
- 开启命名空间后，组件中调用commit;
//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
7、结语
以上是我总结的vue中常用的传参方法，如果觉得还不错的话，就点一个👍啦~；有错误不严谨之处，欢迎各位在评论区纠正指出。谢谢；
