vue组件传值总结

文章有点长，耐心看完，希望你有所收获！！！

1. 父子组件传值

###  props、$ref、$emit

// 总结：prop和$ref都是父组件向子组件通信、$emit是子组件向父组件通信
// props着重于数据的传递，它并不能调用子组件里的属性和方法
// $ref着重于索引，主要用来调用子组件里的属性和方法，不擅长于数据传递

// 父组件




// 父组件 ($ref)




// 子组件

// 应用,显示传过来的值(点击div，将子组件的值传给父组件)
 {{ fathersName }} 

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组件




// components/headerContent.vue组件

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");// 取值

总结: 以上五种方法都是传值的方法，方法各有千秋，相信总有一种方法适合你，最终是以完成项目需求为导向，如你有更好的的方式方法,请留言告知,相互学习才能更快进步.

优秀文章推荐：https://my.oschina.net/u/3982182/blog/3019264