ie9无法获取未定义或 null 引用的属性“indexof”_Vue三大核心概念之一(属性)

本文探讨了Vue组件中自定义属性props的使用,原生属性attrs的区别,以及如何通过props进行类型检查和验证。重点讲解了如何在子组件中接收并校验父组件传递的属性,并介绍了class和style的特殊挂载方式。
摘要由CSDN通过智能技术生成

1.自定义属性props:即组件中声明的属性,子类接受父类的值 2.原声属性attrs:没有声明的属性,默认自动挂在到组件根元素上,设置inheritAttrs为false能够关闭自动挂载 3.特殊属性class,style挂载到组件根元素上,支持字符串,对象,数组等多种语法.

定义属性的两种方式 1.props: ['title', 'likes', 'isPublished', 'commentIds', 'author'] 无法对属性值进行校验 2.可以对属性值进行校验

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }

案例:

子组件


     name:{{name}}type:{{type}}
     list:{{list}}
     isView:{{isView}}"handClick">change





父组件应用子组件

"app">
   {{msg}}   :name="name"
   :type="type"
   :list="list"
   :isView="view"
   :onChange="onChange"
   />






源码:https://github.com/mifunc/rumenz-vue/tree/master/rumenz-vue-three-core

e4b7ffb743a09ca4c5ca4bde7c2afb39.png

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值