Vue中在指令v-bind中使用驼峰命名后，数据渲染失败

最新推荐文章于 2023-05-31 09:58:37 发布

Yue Qin

最新推荐文章于 2023-05-31 09:58:37 发布

阅读量1.5k

点赞数 1

分类专栏：前端文章标签： Vue props 驼峰命名 kebab-case DOM模板

本文链接：https://blog.csdn.net/qq_41241310/article/details/117354641

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

代码如下，父组件给子组件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>

更改后再次运行为：

Yue Qin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue中在指令v-bind中使用驼峰命名后，数据渲染失败

代码如下，父组件给子组件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 : <c.
复制链接

扫一扫

专栏目录