非兄弟组件传值和VUEX
事件总线传值
新建一个js文件 memeda.js
import Vue from 'Vue'
var Bus = new Vue({})
export default Bus
新建两个组件
<template>
<div>
{{msg}}
<button @click="fn"> 发送</button>
<Home1></Home1>
</div>
</template>
<script>
import Bus from '../memeda.js'
import Home1 from './home1'//引入Home1组件 同一页面展示
export default {
components:{
Home1
},
data(){
return{
msg:'我是home'
}
},
methods:{
fn(){
Bus.$emit('meme',this.msg)
}
}
}
</script>
<template>
<div>
{{msg}}
</div>
</template>
<script>
import Bus from '../memeda.js'
export default {
data(){
return{
msg:'我是home1111'
}
},
mounted(){
Bus.$on('meme',(res)=>{
alert(res);//我是home
})
}
}
</script>
<style>
</style>
VUEX传值(mutations和state)
逻辑图
安装VUEX
npm i vuex --save
自建js文件
import Vue from 'vue'
import Vuex from 'vuex'//引入vuex
Vue.use(Vuex)//挂载
var state1 ={
count:1
}
var mutations={//定义一个方法 所有的全局方法都可以加在里面
incCount(){//函数名
++state1.count;
}
}
var state = new Vuex.Store({//实例化Vuex
state:state1,//固定写法
mutations//固定写法 通过this.$store.commit调用
})
export default state
全局main.js
引入
import store from './store/index'
new Vue({
store,
})
全局组件调用数据
{{this.$store.state.count}}
全局调用方法
<button @click="dianji"> 发送</button>
methods:{
dianji(){
this.$store.commit('incCount');//对应的是自建js文件里面的方法
}
}
Getters方法
import Vue from 'vue'
import Vuex from 'vuex'//引入vuex
Vue.use(Vuex)//挂载
var state1 ={
count:1
}
var mutations={//定义一个方法 所有的全局方法都可以加在里面
incCount(){//函数名
++state1.count;
}
}
var getters={//通过this.$store.getters.computedCount调用
computedCount(){//当state里面数据发生变化后自己自动计算的值
return state1.count*20//必须return
}
}
var state = new Vuex.Store({//实例化Vuex
state:state1,//固定写法
mutations,//固定写法 通过this.$store.commit调用
getters//挂载getters
})
export default state
调用
<h1>Getters数据:{{this.$store.getters.computedCount}}</h1>
Action异步方法(ajax,计时器)
Action 类似于 mutation,不同在于:
- Action 提交的是 mutation,而不是直接变更状态。
- Action 可以包含任意异步操作。
import Vue from 'vue'
import Vuex from 'vuex'//引入vuex
Vue.use(Vuex)//挂载
var state1 ={
count:1
}
var mutations={//定义一个方法 所有的全局方法都可以加在里面
incCount(){//函数名
++state1.count;
}
}
var getters={//通过this.$store.getters.computedCount调用
computedCount(){//当state里面数据发生变化后自己自动计算的值
return state1.count*20//必须return
}
}
var actions = {//定义actions
memeda(context){//形参必写!!! 通过this.$store.dispatch('memeda')调用
context.commit('incCount');//执行上面的方法 固定写法
}
}
var state = new Vuex.Store({//实例化Vuex
state:state1,//固定写法
mutations,//固定写法 通过this.$store.commit调用
getters,//挂载getters
actions//挂载actions
})
export default state
调用
<button @click="aaa"> Actions</button>
methods:{
aaa(){
this.$store.dispatch('memeda')
}
}