vue官网-prop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
    <style>
        div {
            font-size: 14px;
            font-weight: normal;
            color: grey;
        }
        .title {
            font-size: 22px;
            font-weight: bolder;
            color: skyblue;
        }
        .common {
            margin-top: 20px;
            margin-bottom: 20px;
            border-top: 2px dashed gainsboro;
        }
        .parting-line {
            background: peachpuff;
            margin: 20px;
        }
    </style>
</head>
<body>
    <div id="app1">
        <div class="common">
           <div class="title">(1) app1-传递静态prop</div>
           <blog-post post-title="m kkdsd"></blog-post>

           <div class="title">(2) app1-动态赋予一个变量的值</div>
           <blog-post v-bind:post-title="post.title"></blog-post>

           <div class="title">(3) app1-动态赋予一个复杂表达式的值</div>
           <blog-post v-bind:post-title="post.title + ' by ' + post.author.name"></blog-post>

        </div>  
    </div>
</body>
<script>
    // prop验证
    Vue.component('my-component', {
        props: {
            // 基础类型检查
            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
                }
            }

        }
    })
    Vue.component('blog-post', {
        props:['postTitle'],
        template:`<h3>{{postTitle}}</h3>`
    })
    var app1 = new Vue({
        el:'#app1',
        data:{
            post:{
                title:'kkk',
                author:{
                    name:'888'
                }
            }
        }
    })
</script>
</html>
猜你喜欢
