Vue.component('child', { // 声明 props，这里驼峰式命名 props: {myMessage:Number}, //模板中可以这样用 template: '<span>{{ myMessage+1}}</span>' //改成表达式 })
这时候如果传入hello！，此时渲染结果？没错，就是NaN。这样别人就知道要传入一个数字了。
如果这样传入
<child my-message="123"></child> //改成123
这样总行了吧，运行，他喵的居然还不行，还是NaN。原文有这样的解释：
//#字面量语法 vs. 动态语法 //初学者常犯的一个错误是使用字面量语法传递数值： <!-- 传递了一个字符串 "1" --> <comp some-prop="1"></comp> 因为它是一个字面 prop，它的值以字符串 "1" 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字，需要使用动态语法，从而让它的值被当作 JavaScript 表达式计算： <!-- 传递实际的数字 --> <comp :some-prop="1"></comp>
好吧，也就是说刚才传递的实际上是字符串”123”，结果必然是NaN,再改：
<child :my-message="123"></child> //改成123
此时{{myMessage+1}}会得到正确的结果：124
以上所述是小编给大家介绍的JS框架之vue.js(深入三:组件1），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章: