JSFiddle - React, Tailwind, and code Playground

by edith_tang

HTML

<div id="app">
  <my-component></my-component>
</div>

JavaScript

Vue.component('my-component', {
	props: {
  	// 必须是数字类型
    propA: Number,
  	// 必须是字符串或数字类型
    propB: [String, Number],
    // 布尔值，如果没有定义，默认值就是true
    propC: {
    	type: Boolean,
      default:true
    },
    // 数字，而且必传
    propD: {
    	type: Number,
      required: true
    },
    // 如果是数组或对象，默认值必须是一个函数来返回
    propE: {
    	type: Array,
      default: function() {
      	return [];
      }
    },
    // 自定义一个验证函数
    propF: {
    	validator: function(value) {
      	return value > 10;
      }
    }
  },
	template: ''
})

var app = new Vue({
	el: '#app'
})