概述
- 代码如下，父组件给子组件child-module传值的时候，由于v-bind的自定义属性childProperty使用的是驼峰命名而导致子组件中的数据渲染失败。
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
Hello :
<child-module v-bind:childProperty="parentProperty"></child-module>
</div>
</body>
<script>
Vue.component('child-module',{
props: ['childProperty'],
template : '<li>child property is : {{childProperty}}</li>',
});
var app = new Vue({
el: '#app',
data: {
parentProperty: 'hello childs',
}
});
</script>
</html>
- 运行结果如下，并不是期待的 child property is : hello childs.
- 查看浏览器控制台得到如下信息。
Prop “childproperty” is passed to component , but the declared prop name is “childProperty”. Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use “child-property” instead of “childProperty”.
Vue提示我们说属性名字是childPropery, 但是HTML属性是大小写不敏感的，所以推荐我们使用中划线的方式，也就是child-property 来替换驼峰式命名。
- 查找Vue 2.X 官方文档给出的解释是：在 DOM 中使用模板时 (直接在一个 HTML 文件里撰写模板)，还需要避免使用大写字符来命名键名，因为浏览器会把 attribute 名全部强制转为小写。
分析如下，因为浏览器不区分大小写，并且浏览器会把字符串都转换为小写字符再去解析；所以childProperty被转换为childproperty, 然后再去子组件props里面去寻找，如下。当然没找到，所以子组件中的数据被渲染失败，输出为空。
Vue.component('child-module',{
props: ['childProperty'],
template : '<li>child property is : {{childProperty}}</li>',
});
- 解决办法只需要按照Vue推荐的去将驼峰命名childProperty转换为中划线child-property的形式即可。
Vue首先会将child-property解析为childProperty，然后再去props里面找，结果就能找到。
只需要修改html，script里面保持不变。
<div id="app">
Hello :
<child-module v-bind:child-property="parentProperty"></child-module>
</div>
- 更改后再次运行为：
最后
以上就是热心眼神为你收集整理的Vue中在指令v-bind中使用驼峰命名后，数据渲染失败的全部内容，希望文章能够帮你解决Vue中在指令v-bind中使用驼峰命名后，数据渲染失败所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复