VUE L ∠初始脚手架事件配置 ⑩⑥

---

文章有误请指正，如果觉得对你有用，请点三连一波，蟹蟹支持✨

                    ⡖⠒⠒⠒⠤⢄⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢸   ⠀⠀⠀⡼⠀⠀⠀⠀ ⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢶⣲⡴⣗⣲⡦⢤⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣰⠋⠉⠉⠓⠛⠿⢷⣶⣦⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⠇⠀⠀⠀⠀⠀⠀⠘⡇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡞⠀⠀⠀⠀⠀⠀⠀⢰⠇⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡴⠊⠉⠳⡄⠀⢀⣀⣀⡀⠀⣸⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠰⠆⣿⡞⠉⠀⠀⠉⠲⡏⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠈⢧⡀⣀⡴⠛⡇⠀⠈⠃⠀⠀⡗⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣱⠃⡴⠙⠢⠤⣀⠤⡾⠁⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⢀⡇⣇⡼⠁⠀⠀⠀⠀⢰⠃⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⣸⢠⣉⣀⡴⠙⠀⠀⠀⣼⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⡏⠀⠈⠁⠀⠀⠀⠀⢀⡇⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠃⠀⠀⠀⠀⠀⠀⠀⡼⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⢸⠀⠀⠀⠀⠀⠀⠀⣰⠃⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⣀⠤⠚⣶⡀⢠⠄⡰⠃⣠⣇⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⢀⣠⠔⣋⣷⣠⡞⠀⠉⠙⠛⠋⢩⡀⠈⠳⣄⠀⠀⠀⠀⠀⠀⠀
⠀⡏⢴⠋⠁⠀⣸⠁⠀⠀⠀⠀⠀ ⠀⣹⢦⣶⡛⠳⣄⠀⠀⠀⠀⠀
⠀⠙⣌⠳⣄⠀⡇   不能   ⡏⠀⠀  ⠈⠳⡌⣦⠀⠀⠀⠀
⠀⠀⠈⢳⣈⣻⡇   白嫖 ⢰⣇⣀⡠⠴⢊⡡⠋⠀⠀⠀⠀
⠀⠀⠀⠀⠳⢿⡇⠀⠀⠀⠀⠀⠀⢸⣻⣶⡶⠊⠁⠀⠀
⠀⠀⠀⠀⠀⢠⠟⠙⠓⠒⠒⠒⠒⢾⡛⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣠⠏⠀⣸⠏⠉⠉⠳⣄⠀⠙⢆⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⡰⠃⠀⡴⠃⠀⠀⠀⠀⠈⢦⡀⠈⠳⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⣸⠳⣤⠎⠀⠀⠀⠀⠀⠀⠀⠀⠙⢄⡤⢯⡀⠀⠀⠀⠀⠀⠀
⠀⠐⡇⠸⡅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠹⡆⢳⠀⠀⠀⠀⠀⠀
⠀⠀⠹⡄⠹⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣇⠸⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠹⡄⢳⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢹⡀⣧⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢹⡤⠳⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣷⠚⣆⠀⠀⠀⠀
⠀⠀⠀⡠⠊⠉⠉⢹⡀⠀⠀⠀⠀⠀⠀⠀⠀⢸⡎⠉⠀⠙⢦⡀⠀
⠀⠀⠾⠤⠤⠶⠒⠊⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⠙⠒⠲⠤⠽   

提示：以下是本篇文章正文内容

$Vuejs$

---

简介 ： Vue 是一套用于构建用户界面的 渐进式 框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

• 官方

1. 中文 ： https://cn.vuejs.org/
2. 英文 ： https://vuejs.org/
3. Vue2API : https://v2.cn.vuejs.org/
4. Vue2 相关包 ： https://github.com/vuejs/awesome-vue
5. Vue2 入门安装官方 ：https://v2.cn.vuejs.org/v2/guide/installation.html
6. Vue 相关插件 ： https://awesomejs.dev/for/vue/

初识$VueCLI$

 $CLI$ 组件的自定义事件

1. 自定义事件是一种组件间通信的方式，适用于：子组件 ===> 父组件

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

3. 绑定自定义事件：

   1. 第 0 种 ： 通过父组件给子组件传递函数类型的props实现：子给父传递数据

   2. 第一种方式，在父组件中：<Demo @bineve="test"/>或 <Demo v-on:bineve="test"/>

   3. 第二种方式，在父组件中 ↓

   <Demo ref="demo"/>
   ......
   mounted(){
         
         
      this.$refs.xxx.$on('bineve',this.test)
   }
   

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

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

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

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

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

 $CLI$ 全局事件总线（$GlobalEventBus$）

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

2. 配置全局事件总线 ↓

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

3. 使用事件总线：↓

methods(){
    
    
  demo(data){
    
    
  //提供数据
  	this.$bus.$emit('xxxx',this.xxx) 
  }
}
......
// 接收数据
mounted() {
    
    
  //xxx 如果不是methods定义的函数则需要使用箭头函数，不然this会出问题！
  this.$bus.$on('xxxx',this.xxx) 
}，
beforeDestroy() {
    
    
  this.$bus.$off('xxxx')
},

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

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

 $CLI$ 消息订阅与发布

   事件订阅~发布 理解

1. 这种方式的思想与全局事件总线很相似

2. 它包含以下操作 ↓

   (1) 订阅消息–对应绑定事件监听
   (2) 发布消息–分发事件
   (3) 取消消息订阅–解绑事件监听

3. 需要引入一个消息订阅与发布的第三方实现库: PubSubJS

   使用PubSubJS

1. Npm: https://www.npmjs.com/package/pubsub-js
2. 下载: npm install -S pubsub-js
3. 相关语法

(1) import PubSub from 'pubsub-js' → // 引入
(2) PubSub.subscribe(‘msgName’, functon(msgName, data){
    
     })  → //~事件订阅
(3) PubSub.publish(‘msgName’, data) →//~发布消息
(4) PubSub.unsubscribe(tokenID): →//取消订阅

总结

以上是个人学习Vue的相关知识点，一点一滴的记录了下来，有问题请评论区指正，共同进步，这才是我写文章的原因之，如果这篇文章对您有帮助请三连支持一波