组件通信相关

组件通信中的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 会被忽略