组件通信

组件通信

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

1.为什么要进行组件通信？

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

2.组件通信的方式有哪几种？

• 父子组件通信： 使用props来实现

  props:

  1. 在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上

     <Son :money = "money"/>
     

  2. 在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以使一个数组

     Vue.component('Son',{
         template: '#son',
         props: ['money']
     })
     

  3. 在子组件模板中，接收到的属性可以像全局变量一样直接使用

     <p> 父亲给了我  {{ money }}  钱  </p> 
     

• 子父组件通信： 自定义事件

  子父通信流程：

  1. 在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件在子组件身上

     <Son @aa = "fn"/>       //这边要注意： fn是要在父组件配置项methods中定义
     

  2. 在子组件的配置项methods中写一个事件处理程序，在事件处理程序中触发父组件绑定的自定义事件

     Vue.component('Son',{
         template: '#son',
         data () {
             return {
                 hongbao: 500
             }
         },
         methods: {
             giveFather () {
                 //如何进行父组件给子组件的自定义事件触发
                 this.$emit('give',this.hongbao)
             }
         }
     })
     

  3. 将子组件定义的事件处理程序 giveFather,绑定在子组件的按钮身上

     <template id="son">
         <div>
             <button @click = "giveFather"> give </button>
             <h3> 这里是son组件 </h3>
         </div>
     </template>
     

• 非父子组件通信

  ref链：可以实现非父子组件的通信，但是如果层级太多，就比较繁琐了 $attrs

  ​ 通过ref绑定组件后，在他们的共同父组件的 $refs里面可以找到子组件

  bus事件总线：通过 $on来定义事件， 通过 $emit来触发事件

  ​ 流程：

  ​ 1.在其中一个组件的 挂载钩子函数 上 做事件的声明

    Vue.component('Sma',{
              template: '#small',
              data () {
                return {
                  flag: false
                }
              },
              mounted () { //当前组件挂载结束，也就是可以在页面当中看到真实dom
                // mounted这个钩子函数的触发条件是组件创建时会自动触发
                // 事件的声明
                var _this = this 
                bus.$on( 'aa',function () {
                  _this.flag = true
                  console.log( this )//这里是this指的是bus， 但是我们需要的this应该是Sma这个组件
                })
              }
            })
  

  ​ 2.在另一个组件中 通过 bus.$emit(‘aa’)来触发这个自定义事件

          Vue.component('Bro',{
              template: '#big',
              methods: {
                  hick () {
                      bus.$emit('aa')
                  }
              }
          })
  

• 多组件状态共享（ 多个组件共用同一个数据 ）： 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.keep-alive

• Vue提供了一个叫做 keep-alive 的组件可以将我们的组件进行浏览器缓存，这样当我们切换组件时，就可以大大提高使用效率

• keep-alive也可以以属性的形式呈现，但是我们如果搭配component的话，建议使用组件的形式

• 保留状态，避免重新渲染

  <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')