在本地组件 vuejs 中访问 props 值答案

【问题标题】：Accessing props values inside of local component vuejs在本地组件 vuejs 中访问 props 值
【发布时间】：2019-03-30 18:11:43
【问题描述】：

我有一个带有两个本地组件的 Vue 实例，这两个组件都具有来自 Vue 实例数据的 props。但是，当我尝试从本地组件之一访问 props 值时，这些值未定义。

这是代码

var custom_erp_widget = new Vue({
    el : '#custom-erp-widgets',
    data : {
        showContainerHeader : false,
        currentModuleName : 'foo',
        currentModuleFormID : '5',
        currentModuleReportID : '6'
    },
    components : {
        'custom-erp-header' : {
            template : '<div class="col-12" id="custom-erp-widget-header">'+
                        '{{ currentModuleName.toUpperCase() }}'+
                       '</div>',
            props : ['currentModuleName']
        },
        'custom-erp-body' : {
            template : '<div class="col-12" id="custom-erp-widget-body">'+
                       '</div>',
            props : ['currentModuleFormID','currentModuleReportID'],
            // for emitting events so that the child components
            // like (header/body) can catch and act accordingly
            created() {
                var _this = this;
                eventHub.$on('getFormData', function(e) {
                    if(e == 'report'){
                        console.log(_this.$props);

                        _this.getReportData();
                    }
                    else if(e == 'form'){
                        console.log(_this.$props);
                        _this.getFormData();
                    }

                });

              },

            methods : {
                // function to get the form data from the server
                // for the requested form
                getFormData : function(){
                    var _this = this;
                    //here the logs are returinig undefined
                    //but it is having values in the data from the root Instance
                    console.log(_this.$props.currentModuleFormID);
                    console.log(_this.currentModuleFormID);

                    axios
                        .get('http://localhost:3000/getFormData',{
                            params: {
                                formID: _this.currentModuleFormID + 'a'
                            }
                        })
                        .then(function(response){

                            console.log(response);

                        })
                }

            }

        }
    },

})

这是组件的HTML用法

<div class="row" id="custom-erp-widgets" v-show="showContainerHeader">

    <custom-erp-header :current-module-name='currentModuleName'></custom-erp-header>    
    <custom-erp-body></custom-erp-body>

</div>

如何访问本地组件函数中的 props 值？

【问题讨论】：

试试this.props？
我可以访问道具，问题是没有定义值。 axios 中的 formID 未定义。
你能在你使用custom-erp-body的地方显示html模板代码吗？
请检查一下，我已经更新了@ittus问题中的HTML

标签： javascript vue.js vue-component

【解决方案1】：

看来问题出在您的 prop names 上，因为 Vue 需要在 DOM 模板中使用 kebab-case-case 形式的 prop 名称。

HTML 属性名称不区分大小写，因此浏览器会解释任何大写字符为小写。这意味着当您使用在 DOM 模板中，camelCased 的道具名称需要使用它们的 kebab-cases （连字符分隔的）等价物。

所以对于currentModuleFormID，它在DOM 模板中需要current-module-form-i-d，而不是你所期望的current-module-form-id。尝试将currentModuleFormID 更改为currentModuleFormId，最后使用小写d 并在模板中使用current-module-form-id，我猜它应该可以工作。

var custom_erp_widget = new Vue({
    el : '#custom-erp-widgets',
    data : {
        showContainerHeader : false,
        currentModuleName : 'foo',
        currentModuleFormId : '5',
        currentModuleReportId : '6'
    },
  ....

<custom-erp-body 
  :current-module-form-id="currentModuleFormId" 
  :current-module-report-id ="currentModuleReportId">
</custom-erp-body>

【讨论】：

非常感谢@Husam，感谢您的帮助。但无论出于何种原因，我都无法访问 axios 参数中的值。你知道这是什么原因吗？
@Rehan 很高兴为您提供帮助。你能详细说明一下Re：axios吗？如果你能更新你的问题会更好。
我将打开一个新问题并在此处引用它。
stackoverflow.com/questions/53003261/…@Husam

【解决方案2】：

你必须将 props 传递给custom-erp-body 组件：

<custom-erp-body 
  :currentModuleFormID="currentModuleFormID" 
  :currentModuleReportID ="currentModuleReportID">
</custom-erp-body>

【讨论】：

我也试过了，但仍然显示未定义。