Vue assembly (below): a communication component

1. What is the component of communication? Why should communicate with components?

• Assembly is integrally having individual functions, to make connections between them together with the used, it is necessary to establish communication.

2. way communication There are several components?

1. Sons components of the communication (achieved by props)
2. Child-parent communication components (custom events)
3. Sons non-communication assembly (REF chain bus event bus)
4. Multi-state sharing component (a common multi-component data Vuex)

3.app instance manually mount

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

4. Custom Event

1. Since the adoption $ on the definition, $ emit defined trigger

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

1. By binding the component body is defined by $ emit trigger,
2. Use: child father communication

	<Son @aa = "fn"/>			 

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

slot slot

1. Role / concept: the future content to be used in advance to be retained
2. Named slots: slot to a name

• Note: in the above two forms is discarded above vue2.6
• Why use v-slot command to replace it?
• Unified through the slot named slot and scope
• The concept of instructions: To these two properties with vue logo, and meet one of the two largest properties vue