组件传参

常见问题

vue组件props没有起作用的原因：并不会在开发版本中运行，只有生产版本会直接删除警告，
引入一个非压缩的版本就可以解决

页面结构

<div id="app">
    <demo :prop-c="propC"></demo>
</div>

<template id="demo">
    <div>
        <h1>props验证</h1>
        {{propC}}
    </div>
</template>

逻辑结构

var app = new Vue({
    el: '#app',
    data:{
        propC:'123',
    },
    components:{
        demo:{
            template: '#demo',
            props:{
                // 基础类型检测, null意味着任何类型都行
                propA: Null,

                // 多种类型
                propB: [String, Number],

                // 必传且是String
                propC: {
                    type: String,
                    required: true
                },

                // 数字有默认值
                propD: {
                    type: Number,
                    default: 101
                },

                // 数组、默认值是一个工厂函数返回对象
                propE: {
                    type: Object,
                    default: function() {
                        console.log("propE default invoked.");
                        return { message: "I am from propE."};
                    }
                },

                // 自定义验证函数
                propF: {
                    isValid: function(value) 
                    {
                        return value > 100;
                    }
                }
            },
        }
    }
})