Vue（7）--自定义组件&自定义事件&插槽

一、自定义组件

1、局部注册

局部注册的组件，只能在当前的Vue实例中使用，并且在其子组件中不可以使用。
在components选项中定义局部组件，每个组件就是一个小型的Vue实例，它里面除了不能设置el选项，其他的它都有。

组件名称：自定义，可以使用驼峰命名的方式或者短横线的命名方式，但是需要注意的是，如果需要应用到DOM中，就只能用短横线的方式命名，否则就会报错。注意组件的名称不要和原生HTML元素重名。

template选项：定义组件的模板，模板中必须包含一个根标签。

props选项：定义组件标签上的属性。驼峰命名法需要使用等价的短横线分隔命名法命名。注意：props是只读的，不能修改。解决办法：在data中对props接收到的数据进行中转。

props的值可以是一个字符串数组，里面定义每一个标签属性名称，这是简单用法，不能对属性做严格的验证。例如：props：["count"]

props的值也可以是一个对象，里面定义的每个标签属性名称也可以是一个对象，对象里面定义该属性的完整信息。type定义类型，required非空，default默认值，props:{ label: {type: String,required: false,}}

data:定义组件的数据，注意：Vue实例的data选项可以是一个对象，也可以是一个方法。由该方法返回一个对象，但是在组件中，data选项必须是一个方法，由该方法返回一个对象，因为组件可能会使用很多次，如果data选项是对象的话，会导致多个组件使用同一个对象。

2、全局注册

全局注册的组件可以用在任何新创建的Vue根实例的模板中。
使用Vue.component来创建全局组件。Vue.component的第一个参数就是组件名。

        

            
{{item.title}}--{{item.value}}
        
       
    
    
    

二、自定义事件$emit()

$emit()用于触发自定义事件，注意：事件名称中不能采用大写字母。

        

            
{{item.label}}--{{item.count}}
        
        
    
    
    

三、插槽

slot用于在组件的内部定义插槽，组件标签之间的内容，会在slot所在位置显示。

 

        
            
全国著名小吃