组件通信相关
组件通信中的props
props验证：
props: {
// 基础的类型检查
PropA: Number
// 多种类型
PropB: [Number,Object]
// 带默认值的对象
对象 {
type: 类别
default() {
return 默认值
}
required: true/false 是否必须
}
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
// return + 条件语句
return ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
组件通信中的ref
- 基本用法获取dom元素
- 获取子组件里面的数据
- 获取子组件里的方法
父传子
子组件通过props 传递出一个对象，父组件通过 ":子组件对象名=要传的数据"
子传父
子组件通过"$emit("事件名",要传递的对象) "自定义一个带参数事件并发射出去
父组件通过使用 "@方法名=父组件方法" 父组件在对方法和参数进行处理
事件修饰符相关
事件修饰符
-
.native
给组件绑定事件时必须加上 .native
相当于子组件内部处理click 事件然后再向外发送事件
-
.stop
- 阻止事件的冒泡（点击子组件不会触发父组件的事件）
.prevent
修饰符的使用 阻止 某些标签拥有自身的默认事件，如a[href="#"]，button[type="submit"]
这些默认事件不会因为.stop 阻止事件传递后停止
-
.once
- 使其只触发一次
-
.self
- 只会触发自己范围内的事件，不包含子元素
-
.capture
- 与冒泡事件访问相反从外到内
-
.passive
主要用于移动端监听滚动 滚动时立即触发
<div @scroll.passive="onScroll">...</div>不能和 .prevent一起使用 因为 .prevent 会被忽略
