vue props属性无法校验

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>vue-project</title>
        <script src="node_modules/_vue@2.4.2@vue/dist/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
            <h3>{{ parentValue }}</h3>
            <example :propA="parentValue"></example>
        </div>
        <script>

            Vue.component('example', {
                props: {
                    //propA的类型为Number
                    propA: {
                        type: Number,
                    },
                },
                template: '<span> {{ propA }} </span>',
            });

            var vm = new Vue({
                el: "#app",
                data: {
                    parentValue: 'abcd',
                }
            });
        </script>
    </body>
</html>

propA绑定到了parentValue的值,类型验证定义为Number,当parentValue为字符串的时候为什么会没有出现错误?

clipboard.png

阅读 5.3k
3 个回答

把代码写对后,如果使用的不是min版的vue.js,可以从控制台中看到warn提示:

Number, got String.

found in

---> <Example>

   <Root>
<div id="app">
  <h3>{{ parentValue }}</h3>
  <example :prop-a="parentValue"></example>
</div>

注意html是不区分大小写的,所以propA根本没有传递给子组件,当然不会有错误提示,除非你还声明了required

注意区分 :propApropA

你在子组件里,定义了propA的类型必须是number的,所以你传进去的是String当然就报错啦

看文档

哈哈 我刚学习vue的时候也是由于用了驼峰命名导致一个报错 花了我好几个小时找bug

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题