组件、父子间的通信

• 自定义的控件（自定义的标签），能够封装可重用的代码，可扩展HTML标签功能

全局组件 不同作用域内均可使用

• 定义方式：

方式一：
Vue.component('name',{
    template:'html结构'     // 这个html结构只能有一个根元素
    或者 
    template:'#search'    
})

方式二：
        
------------------------------------------------------------------------------------------------
        
------------------// script中的实例外面定义组件----------------------------------------
   Vue.component('testcomponent',{
        template:'#search',                //关联上面的组件
        data:function(){                     // 注意！！！模板配置项中的data是方法！！！
            return{                          //！！！模板中的数据用return返回！！！
                msg:'hello',
                name:'lily'
            }
        },
        methods:{
            fn:function(){
                console.log(11111)
            }
        }
    })

• 上面的全局组件写法就是：
  Vue.component('组件名',{构造器}）
• 我们还可以分开来写：

//1.创建构造器
let 构造器名 = Vue.extend({
        template:   ... ,
         ......
    })

//2.注册组件
Vue.component('组件名' , 构造器名）

局部组件 只能在定义该组件的作用域内使用

• 定义方式：

    
        

---------------------调用组件------------------------
             
             
             
        
----------------------定义组件------------------------
        
    
-----------------直接在实例中添加components配置项----------
    var vm = new Vue({
        el:'#box',
        data:{},
        components:{                     //添加组件配置项
            'testcomponent':{          
                template:'#search',
                data:function(){
                    return{
                        msg:'hey',
                        name:'monica'
                    }
                },
                methods:{
                    fn:function(){
                        alert(250)
                    }
                }
            },
            'testcomponent2':{
                template:'
第二个局部组件
'
            },
            //如果定义组件时用了驼峰命名法，在调用时用  - 链接
            'myTest':{
                template:'
***************myTest************
'
            }, 
            //每一个组件相当于一个vue实例
            //所以组件之间的作用域是完全独立的，组件之间的值是不能够共用的
        }
        
    });

!!! 如果定义组件时用了驼峰命名法，在调用时用 - 链接

• props选项

• 作用：props选项用来声明它期待获得的数据
• 本质：元素的属性
• 书写位置：组件内部，与template等配置同级
• 使用：
  • 1.与data一样，props可以使用在模板中
  • 2.可以像在vm实例中像this.message这样使用props定义的值
• 语法：

---------------------js中定义props-----------------------
props:[ 'message1' , 'message2' , 'message3' , 'message4' ...... ]

---------------------html中，传入值-----------------------
<组件 message1='val'> 

---

---

---

image.png

代码实现：

---

---

---

• slot槽口

• 作用：在组件封装的过程中，向外部留出的一些槽口，也就是可供外部插入一些内容
• 语法：
• 不具名的槽口只能预留一个
• 具名槽口
• 具名槽口就是给槽口加一个name属性，在使用组件时插入的内容加上slot属性即可，插入内容的顺序按照模板中的顺序。且具名槽口可预留多个

        

              
                 222 
                 
1111111111
  
              

        
        
        
--------------------------------------js------------------------------
    var vm = new Vue({
        el:'#box',
        data:{},
        components:{                     //添加组件配置项
            'myHead':{          
                template:'#head',
            },
        }    
    });

image.png

代码槽口实现：

        

              
                      
                      
              
              
                      
                      
              
              
                      
                      
               
              
                      
                            
        
        
        

------------------------------------js-------------------------------------
    var vm = new Vue({
        el:'#box',
        data:{},
        components:{                     //添加组件配置项
            'myHead':{          
                template:'#head',
                props:['txt']
            }
        }
    });

• 父子组件

• 组件中还可以再设置组件

components:{
        'parent':{
                  template:'父组件模板'，
                  components:{
                         'child':{
                                  template:'子组件模板'，
                                  ......
                          }
                  }
         }
}

• 子组件要在其父组件的vue模板中调用

    
        
                        //定义视图容器
                           //组件调用
        
        
        
        
             
    


-------------------------------js----------------------------
    var vm = new Vue({
        el:'#box',                            //关联视图容器
        data:{},
        components:{                           //添加组件配置项                               
            'tabBar':{                         //父组件
                template:'#tabbar',
                components:{                   //子组件  只能在父组件的模板中调用
                    'item':{
                        template:'#item',
                        props:['txt']
                     }
                 }
              },
          }     
    });

• 注意！！！
  • 父子组件间作用域相互独立
  • 子组件只能在父组件的模板中进行调用

自定义事件、父子组件传值

• 语法： 抛出自定义事件监听

  • this.$emit('event',val)
  • $emit ------ 实例方法，用来触发事件监听
  • event ----- 自定义事件名称
  • val ----- 通过自定义事件传递的值（可选参数）

• 子传值给父 ----- 逆向传值 $emit

  • 事件触发接受原则：谁触发的监听，由谁接受

  • 子组件触发的监听，则由父模板中调用的子组件接受

    
    
    

    $emit.jpg

• 父传值给子 ----- 正向传值 props
  

  

  props.jpg