没有废话的vue进阶( 一 )

vue组件主要包含：

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

组件精髓

props

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

msg:{
    type: Array,
    default: ()=>([])
}
复制代码

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

event

方法一

<parent-com @on-click="handleClick"></parent-com>

子组件
<button>点击</button>
在子组件中触发
this.$emit('on-click', event);
复制代码

方法二

加上.native就是原生方法
<parent-com @click.native="handleClick"></parent-com>

子组件
<button>点击</button>
复制代码

slot

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