• Vue组件化编码流程，组件自定义事件，全局事件总线，消息订阅与发布

    组件化编码流程案例

    组件化编码流程

    1. 实现静态组件：抽取组件，使用组件实现静态页面效果
    2. 展示动态数据
      1. 数据的类型、名称是什么
      2. 数据保存在哪个组件里
    3. 交互——从绑定事件监听开始

    一个data或者函数等…一个组件在用放在组件自身即可，一些组件在用放在他们共同的父组件上（状态提升）

    组件的自定义事件

    1. 一种组件间通信方式，适用于子组件===>父组件
      • 在父组件中给子组件绑定了自定义事件，子组件触发自定义事件。
    2. 组件上绑定的事件默认为自定义事件，如果要绑定原生DOM事件那么需要使用native修饰符
    3. 如果只想让事件触发一次那么可以使用once修饰符或$once方法
    4. 通过 this.$refs.xxx.$on('自定义事件名’回调函数)绑定自定义事件的时候回调函数要使用箭头函数或者是配置在methods中，这样this才能指向APP，否则this指向xxx
    绑定自定义事件

    第一种绑定方法

    • 当触发了sendMsg事件之后直接执getStudentName回调函数
    • 在Student组件中通过 this.$emits.('sendMsg',this.name)触发该事件并且把name作为参数传递给回调函数getStudentName

    APP.vue