组建通信

组件通信

1. 为什么要进行组件通信？
   组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系
   ，这个联系我们就称之为通信

2. 组件通信的方式有以下几种（ 王者级 ）

   1. 父子组件通信
      使用props来实现
   2. 子父组件通信
      自定义事件
   3. 非父子组件通信
      ref链: 可以实现非父子组件的通信，但是如果层级太多，就比较繁琐了 $attrs
      bus事件总线
   4. 多组件状态共享（ 多个组件共用同一个数据 ） 大知识点（ vuex ）
      vuex

   接下来的几种方式是非常规手段，是你不得已才使用的，砸门是不推荐的

app实例的手动挂载

  new Vue({
    
  }).$mount('#app')

自定义事件

1. 自定义的 通过 $on 定义 $emit触发

      var vm = new Vue({
      el: '#app'
      })
   
      // 自定义事件的定义（ 发布 ）
   
      // vm.$on(自定义事件的名称，自定义事件的事件处理程序)
   
      vm.$on( 'aa', function () {
      console.log( 'aa' )
      })
   
      //自定义事件的触发 （ 订阅 ）
   
      // vm.$emit( 自定义事件的名称，自定义事件处理程序需要的参数1，参数2，参数3)
   
      vm.$emit( 'aa' )
   

2. 通过绑定在组件身上定义，通过 $emit触发
   <Son @aa = “fn”/>

   使用： 子父通信

组件的根元素必须有且仅有一个

动态组件

1. 什么是动态组件？
   可以改变的组件
2. 使用
   通过 Vue 提供了一个 component + is 属性
3. 动态组件指的就是 component这个组件
4. 案例

   <div id="app">
      <button @click = "change"> 切换 </button>
      <keep-alive include="">
         <component :is = "type"></component>
      </keep-alive>
   </div>
   

     Vue.component('Aa',{
         template: '<div> Aa </div>'
      })
   
      Vue.component('Bb',{
         template: '<div> Bb </div>'
      })
   
      new Vue({
         data: {
            type: 'Aa'
         },
         methods: {
            change () {
            this.type = (this.type === 'Aa'?'Bb':'Aa')
            }
         }
      }).$mount('#app')
   

5. Vue提供了一个叫做 keep-alive 的组件可以将我们的组件进行浏览器缓存，这样当我们切换组件时，就可以大大提高使用效率
6. keep-alive也可以以属性的形式呈现，但是我们如果搭配component的话，建议使用组件的形式

slot 插槽

1. 作用/概念: 预先将将来要使用的内容进行保留
2. 具名插槽： 给slot起个名字

• 注意： 以上两种形式在 vue2.6以上被废弃
• 为什么要 用 v-slot指令来代替呢？
  • 经具名插槽和作用域插槽进行统一
  • 要将这两个属性带有 vue的标志，并且符合vue两个最大的特性之一： 指令的概念