【Vue.JS】Vue.JS 中 props 从父组件向子组件传递数据取值问题

本文主要是介绍【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>