vue-例5-10props验证2.html

最新推荐文章于 2025-12-11 16:09:33 发布

原创最新推荐文章于 2025-12-11 16:09:33 发布 · 47 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

Vue 专栏收录该内容

661 篇文章

订阅专栏

该文章演示了如何在Vue.js中进行props验证，通过定义组件的props属性，设置message的类型为Number或String，并可指定参数为必传。示例中创建了一个名为Child的组件，绑定了父组件的数据msg，并在父组件Vue实例中定义了组件的使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>props验证</title>
</head>
<body>
    <div id="app">
        <child v-bind:message="msg"></child>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        let Child = {
            props:{
                message:[Number,String],
                /*
                能够指定的类型有
                String、Number、Boolean、Function、Object
                、Array、Symbol
                 */
                //可以指定参数是否必传
                required:true,
            },
            template:'<div>{{message}}</div>'
        };

        let vm = new Vue({
           components:{
               'child':Child
           },
            el:'#app',
            data:{
               msg: 123
            }
        });
    </script>
</body>
</html>