本文主要是介绍【Vue.JS】Vue.JS 中 props 从父组件向子组件传递数据取值问题，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
关于 VueJS 中 props 传递数据时需要重点注意的一个地方 – 命名。
代码如下
<div id="app"><div><p>props 中声明的数据与组件 data 函数中 return 的数据主要区别就是 props 的数据来自父级，而 data 中的数据是组件本身的，作用域是组件本身</p></div><br><input type="text" v-model="parentMessage"><my-component :warningText="parentMessage"></my-component>
</div>
<script>
Vue.component('my-component', {props: ['warningText'],template: '<div style="color:red">{{warningText}}</div>',data: function () {return {};}})var app = new Vue({el: "#app",data: {parentMessage: 'Hello',}})
</script>
如上：一眼望去，似乎并没有什么问题。但是，结果却…
经过一番调试，发现，需要将父组件的数据名称 warningText 修改为 warning-text。 如下：
<div id="app"><input type="text" v-model="parentMessage"><my-component :warning-text="parentMessage"></my-component>
</div>
<script>Vue.component('my-component', {props: ['warningText'],template: '<div style="color:red">{{warningText}}</div>',data: function () {return {};}})var app = new Vue({el: "#app",data: {parentMessage: 'Hello',}})
</script>
由于好奇心的促使
先尝试将 props 属性接收的名称和父组件中传递的名称都命名为短横线形式，如下:
<div id="app"><input type="text" v-model="parentMessage"><my-component :warning-text="parentMessage"></my-component>
</div>
<script>Vue.component('my-component', {props: ['warning-text'],template: '<div style="color:red">{{warningText}}</div>',data: function () {return {};}})var app = new Vue({el: "#app",data: {parentMessage: 'Hello',}})
</script>
发现可以接收到数据
继续，插值表达式中的名成也修改为 warning-text
<div id="app"><input type="text" v-model="parentMessage"><my-component :warning-text="parentMessage"></my-component>
</div>
<script>Vue.component('my-component', {props: ['warning-text'],template: '<div style="color:red">{{warning-text}}</div>',data: function () {return {};}})var app = new Vue({el: "#app",data: {parentMessage: 'Hello',}})
</script>
显示的值为 NaN
总结
由于 HTML 特性不区分大小写，当使用 DOM 模板时，驼峰式命名的 props 名称要转为短横线分隔命名的形式。
★ 当 props 传值取不到时，一定要首先核对是否是命名规则的自动转换导致
这篇关于【Vue.JS】Vue.JS 中 props 从父组件向子组件传递数据取值问题的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
