vue官网-prop

最新推荐文章于 2024-06-10 21:57:03 发布

weixin_30299709

最新推荐文章于 2024-06-10 21:57:03 发布

阅读量209

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/haimengqingyuan/p/11426633.html

版权

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/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/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>

　　参考 & 感谢：vue官网 & 各路大神

转载于:https://www.cnblogs.com/haimengqingyuan/p/11426633.html

weixin_30299709

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue官网-prop

prop：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
复制链接

扫一扫

vue官网-prop

“相关推荐”对你有帮助么？