vue高级进阶( 一 ) 组件精髓概述

vue高级进阶( 一 ) 组件精髓概述

系列前言

这个系列可能会分为几部分：

1. 基础以及高级用法总结
2. 一些比较有代表性的实战
3. 源码解析（一定是用最粗俗，不对，是最通俗的语言讲解，这个我可以保证）

总之一定对得起高级进阶这几个字。。。

组件分类

vue组件主要包含：

1. 由vue-router产生的页面，可以称之为路由组件
2. 独立基础组件：例如Date和input这之类的可以全局复用的基础组件
3. 业务组件，除了以上两种就是业务组件

组件精髓

props

• tppe 类型
• default 默认
  • 如果是对象，数组，必须要写成方法进行返回

msg:{
    type: Array,
    default: ()=>([])
}

• validator 校验，有一个参数value
• inheritAttrs 是否继承html特性
• 子组件不能修改父组件传递过来的prop

event

方法一

子组件
点击
在子组件中触发
this.$emit('on-click', event)

方法二

加上.native就是原生方法


子组件
点击

slot

节点就是指定的一个插槽的位置,v-slot:[name]可以指定插槽的位置，有了name就叫具名插槽

具名slot

元素可以用一个特殊的属性 name 来配置如何分发内容。多个 slot 可以有不同的名字。具名 slot 将匹配内容片段中有对应 slot 特性的元素 父组件

    
        
{{msg}}
        
就是没有废话！

        vue2.6以上的版本是这样的
        
就是没有废话！
    
 

子组件

作用域插槽

作用域插槽是一种特殊类型的插槽，用作使用一个 (能够传递数据到) 可重用模板替换已渲染元素。 在子组件中，只需将数据传递到插槽，就像将 props 传递给组件一样，插槽的内容就可以使用这个传递过来的数据在父级中，具有特殊属性 scope 的