1. 全局组件的注册    - 创建根实例的时候，data可以是object，也可以是函数    - 创建组件的时候，data必须是函数    1.1 创建

1         Vue.component('global-component',{ 2             template:` 3                 
     
       4                     
      
{
   { hello }}
 5                 
     
 6             `, 7             data(){ 8                 return { 9                     hello:'hello'10                 }11             },12         })

1.2 使用

1        let vm = new Vue({2             el:'#app',3             template:`4                 
     5             `,6         })

1.3 使用

     
            
              
     
        let vm = new Vue({            el:'#app',        })

2. 局部组件     - data必须是函数(单体函数)     - 没有el属性

1 　　　2.1 创建局部组件  实质就是创建JavaScript object 2  3         let Header = { 4             template:` 5                 
     
      {
   { hello }}
     
 6             `, 7             data(){ 8                 return { 9                     'hello':'hello',10                 }11             },12         };13 14     2.2 注册15 16         2.2.117             //单独使用18             new Vue({19                 el:'#app',20                 template:`
     `,21                 components:{22                     'app-header':Header,23                 },24             });25 26         2.2.227             //嵌套使用28             let App = {29                 template:`30                     
     
      111
     
31                     
     32                 `,33                 components:{34                     'app-header':Header,35                 },36             };37 38             new Vue({39                 el:"#app",40                 template:`
     `,41                 components:{42                     App,43                 },44             });

 

3. 组件之间通信     - 父子组件之间的数据 传递拥props  接受父组件的一个事件     - 子父组件之间的数据 传递拥$emit  触发父组件的一个事件     3.1 父子之间通信

1 　　

3.2 子父组件的通信

1  　　
     
       2  3         
     
 4  5        let Header = { 6             template: ` 7                 
     
       8                     
      给父组件传递数据 9                 
     
10             `,11             data() {12                 return {13                     'childData': '子组件的数据'14                 }15             },16             methods: {17                 xxx() {18                     this.$emit('ooo',this.childData);19                 }20             }21         };22 23        let App = {24             template: `25                     
     
      26                         
      
父组件接受的数据---{
   { childData }}
27                         
      28                     
     
29             `,30 31             data() {32                 return {33                     'childData': '1',34                 }35             },36             components: {37                 'app-header': Header,38             },39 40             methods: {41                 get_data(value) {42                     console.log(111,value)43                     this.childData = value;44                 }45             },46 47        };48 49        new Vue({50             el: '#app',51             template: `
     `,52             components: {53                 App,54             },55        })

4. 混入     - 定义一个mixs  object 然后写方法methods(){}     - 使用：mixins = [minx]     - 解决代码重用

1 　　
     
       2         
       3         
       4     
     
 5  6     

 

5. 插槽

1  　　
     
       2         
      
       首页
       3         
      
       轻课
       4         
      
       学位课
       5     
     
 6  7     Vue.components('global-components',{ 8         template:` 9             
     
      
     
10         `11     })12 13     new Vue({14         el:'#app',15     })

6. 具名插槽

1 　　
     
       2         
      
        3             
       
         4                 
        
         这是尾部
         6             
       
 7         
       8  9     
     
10 11     Vue.components('global-components',{12         template:`13             
     
      14                 
      15                 
      16             
     
17         `18     })19 20     new Vue({21         el:'#app',22     })