Vue and dynamic components of the communication component

Communication Components

1. Why components to communicate?
   Components can be said to be a whole having individual functions, but when we want to splice together these components, these components should establish contact with each other
   , that we call communication contact
2. Embodiment are the following components of the communication (King stage)
   1. Sons communication components
      used to implement props
   2. Child-parent communication component
      custom events

           自定义事件
                1. 自定义的   通过  $on  定义    $emit触发
                2. 通过绑定在组件身上定义，通过 $emit触发
                
            子父通信流程
                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>
      

3. Non-parent-child communication components
   ref chain: components can communicate non-father and son, but if levels are too many, it is more cumbersome attrs $
   Bus event bus
4. Multi-state sharing component (a plurality of components share the same data) large knowledge (vuex)
   vuex

The next several ways unconventional means, is that you use the last resort, Zamen is not recommended

Examples of manually mount app

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

Custom Event

1. Custom defined by $ on $ emit trigger

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

2. By binding definition in the component body, by $ emit trigger
   <Son @aa = "fn" / >

   Use: child father communication

Root element assembly must be one and only one

Dynamic Components

1. What is the dynamic components?
   Components can be changed
2. Use
   provided by a component + is attribute Vue
3. Dynamic component refers to the component this component
4. Case

   <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 provides a component called the keep-alive of our components can be browser cache, so that when we switch components, can greatly improve efficiency
6. keep-alive can also be presented in the form of property, but if we mix component, it is recommended to use component form

--------------------------------------------- any doubt see Vue Advanced Day02