Vue补充

组件通信相关

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • created :父组件早于子组件 mounted :子组件早于父组件 在哪个组件发布其实就是再哪个组件监听,只是...
    强某某阅读 309评论 0 0
  • Vue一文学会? Vue大家都知道就是一个国内非常流行的框架,最近因为过了许久没用Vue对于Vue的许多早已淡忘,...
    看物看雾阅读 629评论 0 3
  • 一、简介 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同...
    想聽丿伱說衹愛我阅读 471评论 0 1
  • 1.说说对双向绑定的理解 1.1、双向绑定的原理是什么 我们都知道Vue是数据双向绑定的框架,双向绑定由三个重要部...
    GuessYe阅读 505评论 0 0
  • Vue 1. Vue 定义 官网:https://cn.vuejs.org/ Vue (类似于 view) 是一套...
    领带衬有黄金阅读 371评论 0 0