vue组件间常用的6种通信方式

1.props

常用于父子组件间通信  (父传子)

传递数据:

//父组件 传值
<deom :name1="value1" />  //name1为属性名  value1为属性值(此处是变量)

接收数据:

• 只接收

//子组件 接收值
props:['name1']  //props与data同级

• 限制类型、限制必要性、指定默认值

props:{
    name1:{
        type:String,     //类型
        required:true,   //必要性
        default:"value2" //默认值
    }
}

备注: props是只读的,Vue底层会监测props的修改,如果进行了修改，就会发出警告。若要求需要改，可复制props的内容到data中去，然后改data中的数据。

运用技巧:props也可以用于子传父。父级先向子级传递一个函数，子级在合适的时机调用方法，将需要传递的值以参数的形式传给父级。

2.自定义事件 $emit 与ref/$refs

 常用于父子组件间通信 (子传父)

 传递数据:

    //  子组件
    this.$emit("name1",value1)  //name1 为发送事件名 value1 为需要传给父级的值

接收数据:

• 方法一 用自定义事件接收

     // 父组件中 
    <dome  @name1="getData" />  //name1 为子级发送事件名 getData 为父级接收事件名(建议与`子级发送事件名`保持一致)
    methods:{
        getData(v){
            // v就是子组件传进来的值，既value1
            console.log(v);
        }
    }

•  方法二 ref与$refs

        // 父组件中 
    <dome  ref="mmd" />
    methods:{
        fn(v){
            console.log(v);
        }
    },
    mounted(){
        this.$refs.mmd.$on("name1",this.fn)
        // this.$refs.mmd.$once("发送事件名",this.fn) //只触发一次
    }
    beforeDestroy(){  //在组件销毁前关闭该事件
        this.$refs.mmd.$off("name1")   //关闭事件 name1
        // this.$refs.mmd.$off(["name1","name2"]) //关闭多个事件
        // this.$refs.mmd.$off() //关闭所有事件
    }
  

 备注:

1. 组件上也可以绑定原生DOM事件，需要使用native修饰符。
2. 父组件也可以通过this.$refs的方式获取子组件的属性

3.eventBus 事件总线

任意组件间通信

 注册:

//在mian.js里 Vue实例对象加入生命周期
beforeCreate(){//事件监听之前
   Vue.prototype.$bus=this  //bus 英意:总线
}

发送:

methods:{
    fn(){
        this.$bus.$emit("name1",value1)  //name1:事件名  value1:发送的值
    }
}

接收:

methods:{
   func(v){
       console.log(v)  //v就是其他组件发送的数据
   }
},
mounted(){
    this.$bus.$on("name1",this.func)
},
beforeDestroy(){  //在组件销毁前关闭该事件
    this.$bus.$off("name1")
}

4.消息订阅与发布

任意组件间通信

1. 下载插件 npm i pubsub-js 还有很多类似的插件库(语法可能不一样)

2. 引入 import pubsub from "pubsub-js"

3. 使用

 消息订阅 (接收)

 mounted(){
    // 写法一
    this.pubId = pubsub.subscribe("name1",function(msgName,data){ //若要使this指向vm实例,换箭头函数
        //第一个参数:msgName  消息名字 ==》 name1
        //第一个参数:data     接收的参数 ==》 value1
        console.log(msgName,data)
    })
    // 写法二
    this.pubId1 = pubsub.subscribe("mmd",this.fn)  //需要在methods中准备好fn函数
 },
 beforeDestroy(){
     pubsub.unsubscribe(this.pubId) //取消订阅   》》类似关闭定时器需要·指定名字
 }

消息发布（发送）

pubsub.publish("name1",value1)

5.全局状态 vuex

任意组件间通信

1.下载vuex库 npm install vuex

2.创建文件：src/store/index.js

//引入vue核心库
import Vue from 'vue'
//引入vuex
import vuex from 'vuex'
//应用vuex插件
Vue.use(vuex);
 
//保存具体的数据
const state: {
    sum:1
}
//对state中的数据进行加工，但不会改变其原来的值
const getters: {
    bigSum(state){
        return state.sum*10  // 将state中的sum*10
    } 
}
//修改state中的数据
const mutations: {
    JIA(state,value){  //value  组件传过来的值
        state.sum += value
    }
}
//响应组件中用户的动作
const actions: {
    jia(context,value){  //context  相当于简略版的Store
        context.commit("JIA",value)  //JIA最好有大写 方便区分函数
    }
}


//创建并暴露 store
export default new.Vuex.Store({
    state,
    getters,
    mutations,
    actions
})

3.使用

• 读取  (this.)$store.state.sum 或 (this.)$store.getters.bigSum
• 修改 (this.)$store.dispatch('jia',数据) 或 (this.)$store.commit('JIA',数据)
• 理解vuex可参考 https://blog.csdn.net/m0_63057114/article/details...

6. $children/$parent

$children 官方介绍：

当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。

 用法:

this.$children
//如果你能清楚的知道子组件的顺序，你也可以使用下标来操作；
var inputDom = this.$children[0].$el.querySelectorAll(".el-input__inner")[0];

 $parent 官方介绍：

 当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。

  用法:

this.$parent

this.$parent[0]

与之类似的还有$attrs/$listeners，可以在mounted钩子中打印this后查看

注意:  

1. ref为子组件指定一个索引名称，通过索引来操作子组件；
2. this.$parent 可以直接访问该组件的父实例或组件；
3. 父组件也可以通过this.$children 访问它所有的子组件； 需要注意 $children 并不保证顺序，也不是响应式的。
4. 注意this的指向

 备注: root 和 parent 都能够实现访问父组件的属性和方法，两者的区别在于，如果存在多级子组件，通过parent 访问得到的是它最近一级的父组件，通过root 访问得到的是根父组件