好家伙,
先说一下我的需求,我要组件间传值
前端兄弟组件传值eventbus无法使用
不报错也不触发,就很奇怪
//eventBus.js
import Vue from "vue";
export default new Vue();
//Mylogin.vue
<button type="button" class="btn btn-primary" @click="login">登录</button>
import bus from '../js/eventBus'
methods: {
login() {
bus.$emit('getLoginName', this.loginForm)
}
//Game.vue
import bus from '../js/eventBus'
mounted() {
bus.$on('getLoginName', (data) => {
console.log("这是接收到的数据:", data)
})
}
试试vuex了
2.1.什么是Vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
(我把它理解为一个状态管理器)
2.2.Vuex的安装
npm install vuex --save
main.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0,
user: {
id: '',
password: '',
life: null,
score: null,
loginName: null
},
},
mutations: {
increment(state) {
state.count++
}
}
})
export default store;
new Vue({
store: store,
}).$mount('#app')
Vuex 使用单一状态树——是的,用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 ”而存在。这也意味着,每个应用将仅仅包含一个 store 实例。
以上代码,我们可以使用
console.log(this.$store.state.user)
访问到数据
我们换个思路,A组件把数据存到本地,
然后B组件读取,这在某种意义上也是一种"组件传值"
//存数据
localStorage.setItem("getuserdata", JSON.stringify(this.player));
//取数据
JSON.parse(localStorage.getItem("getuserdata"));
//删数据
localStorage.removeItem("getuserdata");
//清除所有
localStorage.clear();