vue-例5-10props验证.html

原创于 2023-04-28 10:21:53 发布 · 57 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

Vue 专栏收录该内容

661 篇文章

订阅专栏

该代码示例展示了在Vue.js中如何对组件的props进行类型检查，通过定义`props`对象并指定`message`属性为`Number`类型，确保传入的数据是一个数字。主组件`app`将数据`msg`绑定到子组件`child`的`message`属性上，从而实现数据传递。

<!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
            },
            template:'<div>{{message}}</div>'
        };

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