vue中组件间的通信

//父组件
<BlogPost :title="post.title" />
 
//子组件
export default { 
    ...
    props: { 
       title: String,
       defalut: ''
    }
    ... 
}
 
//子组件使用
{{ title }}

<School :getSchoolName="getSchoolName"/>
 
methods: {
    getSchoolName(name){
        console.log('App收到了学校名：',name)
    }
}

"sendSchoolName">把学校名给App
 
props:['getSchoolName'],
data() {
    return {
        name:'学校名称'
    }
},
methods: {
    sendSchoolName(){
        //通过props中的函数将学校名传给App父组件。
        //这得需要父组件先给子组件一个函数类型的props，子组件调用这个函数，将数据传递出去
        this.getSchoolName(this.name)
    }
}

<Student @getStudentName="getStudentName"/>
 
methods: {
    getStudentName(name, ...params){
        console.log('App收到了学生名：',name,params)
    }
}

<Student ref="student" />
 
methods: {
    getStudentName(name,...params){
        console.log('App收到了学生名：',name,params)
    }
},
mounted() {
    this.$refs.student.$on('getStudentName',this.getStudentName) //绑定自定义事件
}

"sendStudentName">把学生名给App
 
data() {
    return {
        name:'张三'
    }
},
methods: {
    sendStudentName(){
        //触发Student组件实例身上的getStudentName事件
        this.$emit('getStudentName',this.name,666,888,900)
    }
}

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
 
//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this //安装全局事件总线
    },
})

mounted() {
    this.$bus.$on('hello',(data)=>{
        console.log('我是School组件，收到了数据',data)
    })
},
beforeDestroy() {
    this.$bus.$off('hello')
}

"sendStudentName">把学生名给School组件
 
data() {
    return {
        name:'张三'
    }
},
methods: {
    sendStudentName(){
        this.$bus.$emit('hello',this.name)
    }
}

 
<script>
    import pubsub from 'pubsub-js'
    export default {
        name:'Student',
        data() {
            return {
                name:'张三',
                sex:'男',
            }
        },
        methods: {
            sendStudentName(){//发布消息
                pubsub.publish('hello',666)
            }
        },
    }
script>

npm install vuex --save             //默认安装Vuex4
//npm install vuex@3 --save           //安装Vuex3
 
//tips：默认安装的时Vuex4，但是Vue2只能使用Vuex3；Vue3使用Vuex4

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
 
//引入store
import store from './store'
 
//关闭Vue的生产提示
Vue.config.productionTip = false
 
//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    store
})

//求和相关的配置
export default {
    namespaced:true,
    actions:{
        jiaOdd(context,value){
            console.log('actions中的jiaOdd被调用了')
            if(context.state.sum % 2){
                context.commit('JIA',value)
            }
        },
        jiaWait(context,value){
            console.log('actions中的jiaWait被调用了')
            setTimeout(()=>{
                context.commit('JIA',value)
            },500)
        }
    },
    mutations:{
        JIA(state,value){
            console.log('mutations中的JIA被调用了')
            state.sum += value
        },
        JIAN(state,value){
            console.log('mutations中的JIAN被调用了')
            state.sum -= value
        },
    },
    state:{
        sum:0, //当前的和
        school:'学校',
        subject:'学科',
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    },
}

//人员管理相关的配置
import axios from 'axios'
import { nanoid } from 'nanoid'
export default {
    namespaced:true,
    actions:{
        addPersonWang(context,value){
            if(value.name.indexOf('王') === 0){
                context.commit('ADD_PERSON',value)
            }else{
                alert('添加的人必须姓王！')
            }
        },
        addPersonServer(context){
            axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON',{id:nanoid(),name:response.data})
                },
                error => {
                    alert(error.message)
                }
            )
        }
    },
    mutations:{
        ADD_PERSON(state,value){
            console.log('mutations中的ADD_PERSON被调用了')
            state.personList.unshift(value)
        }
    },
    state:{
        personList:[
            {id:'001',name:'张三'}
        ]
    },
    getters:{
        firstPersonName(state){
            return state.personList[0].name
        }
    },
}

//该文件用于创建Vuex中最为核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//应用Vuex插件
Vue.use(Vuex)
 
//创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout:countOptions,
        personAbout:personOptions
    }
})

 
<script>
    import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
    export default {
        name:'Count',
        data() {
            return {
                n:1, //用户选择的数字
            }
        },
        computed:{
            //借助mapState生成计算属性，从state中读取数据。（数组写法）
            ...mapState('countAbout',['sum','school','subject']),
            ...mapState('personAbout',['personList']),
 
            //借助mapGetters生成计算属性，从getters中读取数据。（数组写法）
            ...mapGetters('countAbout',['bigSum'])
        },
        methods: {
            //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
            ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),
 
            //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
            ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
        },
        mounted() {
            console.log(this.$store)
        },
    }
script>
 
<style lang="css">
    button{
        margin-left: 5px;
    }
style>