【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 传值取不到时，一定要首先核对是否是命名规则的自动转换导致