vue2

props

让组件接收外部传过来的数据

使用

传递数据：

`<Demo name="xxx"/>`

接收数据：

第一种方式（只接收）：`props:['name']`

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

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

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

props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么需要复制props的内容到data中一份，然后去修改data中的数据（引用类型内部可被更改，当不建议使用）。

props实现子组件向父组件传递数据

父组件将函数传递给子组件，子组件通过调用父组件中的函数，将数据传递给父组件。

自定义事件

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

使用场景

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

使用方式

绑定自定义事件

第一种方式，直接使用：

<Demo @XXX="onTest"/>
<Demo v-on:XXX="onTest"/>

methods:{
    onTest(){}
}

第二种方式，动态添加：

<Demo ref="demo"/>

mounted(){
   this.$refs.demo.$on('XXX',()=>{})
}
//通过`this.$refs.xxx.$on('atguigu',回调)`绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

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

触发自定义事件

this.$emit('xxx',数据)

解绑自定义事件

this.$off('xxx')

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

全局事件总线

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

安装全局事件总线

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

使用事件总线

接收数据

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

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

提供数据

this.$bus.$emit('xxxx',数据)

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

消息订阅-发布模式

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

pubsub的使用

安装：npm i pubsub-js

引入: import pubsub from 'pubsub-js' 接收数据-消息订阅

mounted() {
  this.pid = pubsub.subscribe('xxx',this.data) //订阅消息,data接收到数据
}

提供数据-消息发布

pubsub.publish('xxx',数据)

取消订阅

PubSub.unsubscribe(this.pid)//可在beforeDestroy钩子中使用

vuex

provide 与 inject

实现祖与后代组件间通信

使用

父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

祖组件中：

setup(){
    ......
    provide('aData',aData)
    ......
}

后代组件中：

setup(props,context){
    ......
    const aData = inject('aData')
    return {aData}
    ......
}

vue-组件间通信