Question

我在Vue.js中定义了一个自定义模态组件。但是，我偶然发现了一个我想要了解得更好的错误。你看，我的模态是一个简单的确认对话框，带有是/否按钮。感谢Vue的模板功能，我能够进行设置，因此我可以在应用程序中为每个确认对话框重用我的组件。你看，为了使这项工作，我不得不将“ID”属性变成一个参数。这是代码：

Vue.component('modal-confirm', {
        props: ['message', 'mod_id'],
        template:`
        <div class="modal fade" :id="mod_id" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header alert-primary">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title text-primary"><i class="fa fa-share-alt"></i> Confirmation</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-lg-12">@{{ message }}</div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <modal-confirm-btn etiquette="Oui" valeur="true" url="{{ url('/api/reportsrenew/deliverReport') }}" v-on:modal_confirm="modalConfirm"></modal-confirm-btn>
                        <modal-confirm-btn etiquette="Non" valeur="false" url="{{ url('/api/reportsrenew/deliverReport') }}" v-on:modal_confirm="modalConfirm"></modal-confirm-btn>
                    </div>
                </div>
            </div>
        </div>
        `,
        methods:{
            emit: function(valeur, url){
                this.$emit('modal_confirm',  valeur, url ); 
            }
        },
        components: {
            'modal-confirm-btn': {
            template: '<button v-on:click="emit" data-dismiss="modal" type="button" class="btn btn-default btn-sm btn-primary">@{{ etiquette }}</button>',
            props:['etiquette', 'valeur', 'url'],
            methods:{
                emit: function(){
                    this.$emit('modal_confirm',  this.valeur, this.url ); 
                    }
                }
            }
        }
    });

现在，正如你所看到的，在“props”中，我已经定义了我在模板中使用的“mod_id”属性。但是，如果我尝试使用“mod-id”作为属性名称，我会收到错误消息

属性或方法“mod”未在实例上定义，但已引用在渲染过程中确保在中声明了反应数据属性数据选项。

我只想知道为什么在这个特定用途的属性名称中不允许使用连字符。

Answer 1

如果在Vue中的属性定义中包含短划线，则Vue会在camelCased版本中将属性添加到Vue。在您的情况下，mod-id在Vue上变为modId。

当您尝试在模板中引用mod-id时，Vue会解释

:id="mod-id"

作为javascript表达式mod - id，或从名为id的变量中减去名为mod的变量。

您的Vue上没有名为mod的属性，这会导致您的错误。

所以从技术上讲，Vue允许你用破折号定义属性，但是它在你下面改为camelCased版本，因为它将该属性添加到Vue。在javascript中，您通常不会在包含破折号的对象上拥有属性。你可以拥有它们，但你必须将它们用引号括起来，你必须使用索引器（即this['mod-id']）取消引用它们。编写所有框架代码以使其必须处理该边缘情况没有意义，因此Vue只是将它们转换为camelCased。

在组件

1 个答案: