其他分享
首页 > 其他分享> > 组件通信方式

组件通信方式

作者：互联网

第一种通信方式props

使用场景:[父子通信]

传递数据类型：
1:可能是函数  -----------实质子组件想给父亲传递数据
2:可能不是函数-----------实质就是父亲给子组件传递数据
接受方式：
1.props：['xxx']
2.props:{xxx:string}
3.props:{
  xxx:{
    type:String, //类型
    required:true, //必要性
    default:'老王' //默认值
  }
}
特殊情况：路由传递props
1:布尔值类型，把路由中params参数映射为组件props数据
2:对象，静态数据，很少用
3:函数，可以把路由中params|query参数映射为组件props数据

第二种通信方式 自定义事件 $on $emit

1. 一种组件间通信的方式，适用于：<strong style="color:red">子组件 ===> 父组件</strong>
2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（<span style="color:red">事件的回调在A中</span>）。
3. 绑定自定义事件：
        第一种方式，在父组件中：```<Demo @atguigu="test"/>```  或 ```<Demo v-on:atguigu="test"/>```
        第二种方式，在父组件中：
          <Demo ref="demo"/>
          ......
          mounted(){
           this.$refs.xxx.$on('atguigu',this.test)
          }
4.若想让自定义事件只能触发一次，可以使用```once```修饰符，或```$once```方法。
5. 触发自定义事件：```this.$emit('atguigu',数据)```		
6. 解绑自定义事件```this.$off('atguigu')```
7. 组件上也可以绑定原生DOM事件，需要使用```native```修饰符。
8. 注意：通过```this.$refs.xxx.$on('atguigu',回调)```绑定自定义事件时，回调<span style="color:red">要么配置在methods中</span>，<span style="color:red">要么用箭头函数</span>，否则this指向会出问题！

第三种通信方式 全局事件总线 Vue.prototype.$bus = this 一种组件间通信的方式，适用于任意组件间通信。

组件实例的原型的原型指向的Vue.prototype
安装全局事件总线：
new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
}) 
使用全局事件总线：
接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的<span style="color:red">回调留在A组件自身。</span>
methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}
提供数据：this.$bus.$emit('xxxx',数据)

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

第四种方式，消息订阅与发布

  1. 一种组件间通信的方式，适用于任意组件间通信。

  2. 使用步骤：

    1. 安装pubsub：npm i pubsub-js

    2. 引入: import pubsub from 'pubsub-js'

    3. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。

    methods(){
  demo(data){......}
}
......
mounted() {
  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息
}

  3. 提供数据：pubsub.publish('xxx',数据)

  4. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。

第五种方式 vuex 一种万能的组件通信方式 数据非持久化

基本使用

//引入vue
import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//引入vuex小仓库
......
export default new Vuex.Store({
    modules: {
       ......
    }
})

vuex基本环境
export default {
//开启命名空间
namespaced: true,
actions:{},
mutations:{},
state:{},
getters:{}
}

第六种方式 插槽

  1. 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于 父组件 ===> 子组件 。

  2. 分类：默认插槽、具名插槽、作用域插槽

标签：自定义,方式,......,xxx,通信,事件,props,组件
来源： https://www.cnblogs.com/ljybg/p/16419289.html