组件的属性

组件的属性有两种写法：1、简单声明   2、详细叙述

1、简单声明

写法：props:["属性名1","属性名2",......] 

须知：属性可以多传  但是注册了的属性就必须传 不然有可能会在使用时因为取值问题出BUG

主要用途：用于组件之间的传值，正常情况下被导入的那个组件内想使用导入它的那个组件的data数据值是不能实现的，这里的组件的属性可以办到。在其它组件中使用该组件时用到的对应的属性设置的值会传给该组件。

创建属性：

<template>
    <div>
        <div>{{name1}}</div>
        <div>{{age}}</div>
    </div>
</template>

<script> 
    export default{
        //注册属性
    props:["name1","age"]
    }
</script>

 在其它组件中使用该组件并给该属性传值：

<template>
 <div>
   <test1 :name1="name1" age="age"></test1>
 </div>
</template>

<script>
import test1 from "@/componentprops/test1.vue"
export default {
  data() {
    return {
      name1:"zs",
      age:30
    }
  },
  components:{
    //注册first组件
    test1
  }
}
</script>

页面显示：

 

 

 2、详细叙述

详细叙述除了指定的属性名外，还指定属性的类型，默认值，是否必填等；属性的类型验证只是一种验证提示 不会阻止程序运行。

写法：

props: {
	propA: Number,		// 基础的类型检查 (`null` 匹配任何类型)
	propB: [String, Number],	// 多个可能的类型
	propC: {	type: String,    //类型
     		 required: true	// 必填的字符串
   	},
	propD: {	type: Number,
      		default: 100	// 带有默认值的数字
    	},
	propE: {	type: Object,	// 带有默认值的对象或者数组填Array
		default: function () {	// 不建议直接填对象(因为对象直接量会一直占用内存),一般使用工厂函数,调用时才创建对象节省资源(面试)
        		return { message: 'hello' }
      		}
    	},
	propF: {
      		validator: function (value) {// 自定义验证函数返回为true就代表数据符合我们规定
			return ['success', 'warning', 'danger'].indexOf(value) !== -1
      		}
    	}
  }

prop*就是属性名，*号（代表A B C D E F）