Vue2组件通信方式

目录

props配置项

 组件的自定义事件

全局事件总线

消息订阅与发布（pubsub）

---

props配置项

1、功能：让组件接收外部传过来的数据

2、传递数据：

3、接收数据：

        1.第一种方式（只接收）：props:["name"]

        2.第二种方式（限制类型）：props:{name:String}

        3.第三种方式（限制类型、限制必要性、指定默认值）：

props:{
    name:{
    type:String, //类型
    required:true, //必要性
    default:'老王' //默认值
    }
}

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。props传入的数据优先级更高。

 组件的自定义事件

1、一种组件间通信的方式，适用于：子组件 ===> 父组件

2、使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

3、绑定自定义事件：

        1.第一种方式，在父组件中： 或

        2.第二种方式，在父组件中：

......
mounted(){
   this.$refs.xxx.$on('atguigu',this.test)
}

         3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

4、触发自定义事件：this.$emit('atguigu',数据)

5、解绑自定义事件this.$off('atguigu')

6、组件上也可以绑定原生DOM事件，需要使用native修饰符。

7、注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

全局事件总线

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

2、安装全局事件总线：

new Vue({
	......
	beforeCreate() {
		Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm
	},
    ......
}) 

3、使用事件总线：

          1.接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

methods(){
  demo(data){......}
}
......
mounted() {
  this.$bus.$on('xxxx',this.demo)
}

         2. 提供数据：this.$bus.$emit('xxxx',数据)

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

消息订阅与发布（pubsub）

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) //订阅消息
}

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

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

 ref属性

1、被用来给元素或子组件注册引用信息（id的替代者）

2、应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

3、使用方式：

        1.打标识：

.....

或

        2.获取：this.$refs.xxx

slot插槽（默认插槽、具名插槽、作用域插槽）

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

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

3、使用方式：

        1.默认插槽：

父组件中：
        
           
html结构1
        
子组件中：
        

        2.具名插槽：

父组件中：
        
            

            
        
子组件中：
        

        3.作用域插槽

                1.理解：数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

                2.具体编码：

父组件中：
		
			
		

		
			
		
子组件中：