文章有点长，耐心看完，希望你有所收获！！！
1. 父子组件传值
### props、$ref、$emit
// 总结：prop和$ref都是父组件向子组件通信、$emit是子组件向父组件通信
// props着重于数据的传递，它并不能调用子组件里的属性和方法
// $ref着重于索引，主要用来调用子组件里的属性和方法，不擅长于数据传递
// 父组件
<template>
<son :fathersName="kattes" @sonClick="sonClickEvent">我是爸爸</son>
</template>
<script>
export default {
methods: {
// 点击子组件的事件
sonClickEvent( name ){
console.log(name) // 特特朗普
}
}
}
</script>
// 父组件 ($ref)
<template>
<son ref="msg">我是爸爸</son>
</template>
<script>
export default {
mounted: function () {
// 直接调用子组件的方法，可通过事件将值传给子组件 message
this.$refs.msg.getMessage('所传的值')
}
}
</script>
// 子组件
<script>
export default {
props: {
fathersName: {
type: String,//传值类型
default: 'hello world',//默认传值
}
},
data(){
return {
message: ""
}
},
methods: {
// div点击事件
divClick(){
let sonName = "特特朗普"
this.$emit("sonClick", sonName)
},
// getMessage事件
getMessage(msg){
this.message = msg;
}
}
}
</script>
// 应用,显示传过来的值(点击div，将子组件的值传给父组件)
<div @click="divClick"> {{ fathersName }} </div>
2. 兄弟组件传值(法一)
vuex主要用于管理vue中的数据，但是网上说最好大型项目用，其他的一些中小型或者小型的项目能别用尽量别用（现在还不太理解），vuex中主要包含四类：state、getter、mutations、actions，之间的关系如下图：
image.png
可以从上图很清晰的看到每个状态之间的触发的方法，其中，state主要用于管理项目的数据（进行数据初始化）；getters就要读取state中的数据，相当于computed当数据进行更新时读取数据；mutations主要用于操作state中的数据，说白了就是对state数据进行更改；action 提交的是 mutation，而不是直接变更状态，(dispatch)触发，(参数需要context)。
// 例子说明：下面例子(headertop，headerContent在同级目录下的组件)，打开页面时，两个组件都会获取到state值，在headertop组件中，可通过input输入框输入设置city名(同时改变两个组件的显示)，相当于headertop中改变信息，headerContent接收信息，并发生改变。
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
city: "四川成都"
},
getters: {
getCity(state) {
return state.city;//返回当前city值
}
},
mutations: {
changeCity(state, name) {
state.city = name;//为city设置新的值
}
},
actions: {//使用结构赋值， 参数列表{commit ,state}
setCityName({ commit, state }, name) {
// commit调用mutations的方法
commit('changeCity', name)//用于提交mutations方法，传递城市名
}
}
})
// components/headertop.vue组件
<template>
<p>headertop组件的city值: {{ city }} </p>
<input type="text" :value="city" @change="changeCity"/>
</template>
<script>
export default{
name: "headerTop",
data(){
return{
}
},
methods:{
// 通过input框设置城市名字
changeCity(e){
this.$store.dispatch('setCityName', e.target.value)
}
}
}
</script>
// components/headerContent.vue组件
<template>
<p>headerContent组件的city值: {{ city }} </p>
</template>
<script>
name: "headerContent",
data(){
return {
}
},
computed:{
city: function(){
return this.$store.state.city
}
}
</script>
3. 多个传值或处理 mapState，mapAction，mapMutations
(1) mapState
// 简单的vue项目使用vuex就直接用: this.$store.state.变量名
import { mapState } from vuex
// 法一：
computed:{
...mapState({
add : state => state.add,
count : state => state.count
})
}
// 法二：
computed:{
...mapState(['add','count'])
}
// 总结: 调用this.add、this.count 映射为 this.$store.state.add、this.$store.state.count
(2) mapAction
// 简单的vue项目使用vuex就直接用: this.$store.dispatch('setCityName',name)
import { mapAction } from vuex
// 法一:
methods:{
...mapActions(['commonActionGet', 'commonActionPost'])
}
// 法二:
methods:{
...mapActions({
'commonActionGet': 'commonActionGet',
'commonActionPost': 'commonActionPost',
})
}
// 总结: 调用this.commonActionGet() 映射为 this.$store.dispatch('commonActionGet')、调用this.commonActionPost() 映射为 this.$store.dispatch('commonActionPost')
(3) mapMutations
// 简单项目中直接使用 this.$store.commit('changeCity', "四川成都")
// import { mapMutations } from vuex
// 法一:
methods:{
...mapMutations({
'add': 'add'
})
}
// 法二:
methods:{
...mapMutations(['add'])
}
// 总结：调用this.add 映射为 this.$store.commit('add')
4. 兄弟组件传值(法二) this.$bus.$emit this.$bus.$on this.$bus.$off
// main.js
Vue.prototype.$bus = new Vue();
// a组件
this.$bus.$emit("updata","参数")
// b组件
this.$bus.$on("updata",(data)=>{
console.log(data)
})
// 此时，你就可以正常使用兄弟之间得组件通信，但是还有一个问题，就是当你多次使用兄弟组件之间的通信时，会发现，每执行一次，会触发多次，每次执行完我们还需要销毁
//生命周期销毁
destroyed(){
this.$bus.$off('updata')
}
5. 缓存传值 ( localStorage、sessionStorage )
// localStorage
localStorage.setItem("lastname", "Smith");// 存储
localStorage.getItem("lastname");// 取值
// sessionStorage
sessionStorage.setItem("lastname", "Smith");// 存储
sessionStorage.getItem("lastname");// 取值
