为什么不能获得参数？

Question

我使用来自Vue实例的v-bind传递userId到它的子组件。 template：data-user-id可以获取此值，但是 edit（）方法，不能，为什么？

HTML

<aa :userId="userId"></aa>

的JavaScript

var aComponent = {
    template: '<a href="#" :data-user-id="userId" @click.prevent="edit()">click me</a>',
    props: ['userId'],
    methods: {
        edit: function () {
            console.log('edit user:' + this.id + ":" + this.userId);
        }
    },
    data: function(){
        return {
            id: this.userId
        };
    }
};
var vm = new Vue({
    data: function () {
        return {

            userId: '201'
        };
    },
    components: {
        aa: aComponent
    },
    el: '#app'
});

Answer 1

您的属性必须为kebab-case。

  

HTML属性不区分大小写，因此在使用非字符串时   模板，camelCased道具名称需要使用他们的kebab案例   （连字符分隔）等价物

<aa :user-id="userId"></aa>