vue中组件间的通信

方式一：

props：父组件可以通过该方式将数据传递给子组件

示例：

//父组件


//子组件
export default { 
    ...
    props: { 
       title: String,
       defalut: ''
    }
    ... 
}

//子组件使用
{{ title }}

方式二：

父组件首先给子组件传递一个函数类型的props，然后子组件调用该函数给父组件传值。 该 方式只适用于父子组件中

父组件中：

methods: {
    getSchoolName(name){
        console.log('App收到了学校名：',name)
    }
}

子组件中：

把学校名给App

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

方式三：

通过自定义事件实现组件间通信， 该方式适用于父子组件间

父子组件之间的访问方式：

1、父组件访问子组件：$refs：开发中常用

ref:用来给元素或者子组件注册引用信息

2、子组件访问父组件：$parent ，在开发中尽量少用，组件复用性很高！从这个父组件中拿到的属性，在其他父组件中可能没有这个属性

3、子组件访问根组件：$root

父组件中：

写法1：

methods: {
    getStudentName(name, ...params){
        console.log('App收到了学生名：',name,params)
    }
}

写法2：

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

子组件中：

把学生名给App

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

方式四：

通过全局事件总线实现组件间通信， 该方式适用于任何组件间

main.js中安装全局事件总线：

//引入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')
}

消息发送者：

把学生名给School组件

data() {
    return {
        name:'张三'
    }
},
methods: {
    sendStudentName(){
        this.$bus.$emit('hello',this.name)
    }
}

方式五：

消息的发布于订阅， 该方式适用于任何组件间。这里使用pubsub实现消息的订阅与发布

先安装pubsub-js：npm i pubsub-js

消息订阅者school.vue:

消息发布者student.vue:

方式六：

通过Vuex实现组件间的通信， 该方式适用于任何组件间

安装Vuex：

npm install vuex --save             //默认安装Vuex4
//npm install vuex@3 --save           //安装Vuex3

//tips：默认安装的时Vuex4，但是Vue2只能使用Vuex3；Vue3使用Vuex4

使用：

main.js:

//引入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
})

src/store/count.js:

//求和相关的配置
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
        }
    },
}

src/store/person.js:

//人员管理相关的配置
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
        }
    },
}

src/store/index.js:

//该文件用于创建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
    }
})

count.vue: 

模块化+命名空间-->借助四个map辅助函数

person.vue: 

模块化+命名空间-->原生写法

方式七：

Vue3中的provide和inject（依赖注入）， 适用于 祖先组件和后代（孙子）组件

祖先组件和儿子组件中也可用，但没必要；props更简单方便

示例：

祖先组件（祖）：

后代组件（孙）：

学习不仅仅是只会学，还要会总结和复习！

如有不当，请留言指正！！！