Vue-自定义属性props

一、属性

1. 自定义属性props

prop 定义了这个组件有哪些可配置的属性，组件的核心功能也都是它来确定的。写通用组件时，props 最好用对象的写法，这样可以针对每个属性设置类型、默认值或自定义校验属性的值，这点在组件开发中很重要，然而很多人却忽视，直接使用 props 的数组用法，这样的组件往往是不严谨的。

// 父组件 
<props 
name='属性'          
:type='type'         
:is-visible="false"          
:on-change="handlePropChange"          
:list=[22,33,44]          
title="属性Demo"          
class="test1"          
:class="['test2']"           
:style="{ marginTop: '20px' }" //注意:style 的优先级是要高于style  style="margin-top: 10px">  
</props>
// 子组件  
props: { 
    name: String,    
    type: {//从父级传入的 type，它的值必须是指定的 'success', 'warning','danger'中的一个，如果传入这三个以外的值，都会抛出一条警告         validator: (value) => {        
        return ['success', 'warning','danger'].includes(value) 
      }   
    },    
    onChange: {//对于接收的数据，可以是各种数据类型，同样也可以传递一个函数 
          type: Function,    
          default: () => { }    
    },   
    isVisible: {      type: Boolean,      default: false    },     list: {  type: Array, // 对象或数组默认值必须从一个工厂函数获取             default: () => []   
    }  
}

从上面的例中，可以得出props 可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以传递一个函数。通过一般属性实现父向子通信；通过函数属性实现子向父通信