Javascript VueJS如何从组件使用父方法

我想从组件访问父级的方法。 （无道具）

以下是HTML：

<div id="el">
    <user v-for="user in users" :item="user"></user>
</div>

以下是Vue代码：

var usersData = [
    { id:1, firstname:'John', lastname: 'Doe' },
    { id:2, firstname:'Martin', lastname: 'Bust' }
];

var vm = new Vue({
    el: '#el',
    data: { users: usersData },
    methods: {
        getFullName: function (user) {
            return user.id + '. ' + user.firstname + ' ' + user.lastname;
        }
    },
    components: {
        user: {
            template: '<span>{{ fullName }}</span>',
            props: ['item'],
            computed: {
                fullName: function(){
                    return this.$parent.getFullName(this.item);
                }
            },
        }
    }
});

var usersData=[
{id:1，名：'John'，姓：'Doe'}，
{id:2，姓：'Martin'，姓：'Bust'}
];
var vm=新的Vue({
el:“#el”，
数据：{users:usersData}，
方法：{
getFullName:函数（用户）{
返回user.id+'.'.+user.firstname+''.+user.lastname；
}
},
组成部分：{
用户：{
模板：“{{fullName}}”，
道具：['item']，
计算：{
全名：函数（）{
返回此.$parent.getFullName（此.item）；
}
},
}
}
});

VueJS版本：2.0.2

---

两者都是

this.$parent.$options.methods.getFullName（）

和

this.$parent.methods.getFullName（）

不起作用。

对于Vue.js 2.2.0+版，您可以将依赖项注入与

inject

一起使用，并且

提供类似的

：

HTML:

<div id="el">
    <user v-for="user in users" :item="user"></user>
</div>

JavaScript:

var usersData = [
    { id:1, firstname:'John', lastname: 'Doe' },
    { id:2, firstname:'Martin', lastname: 'Bust' }
];

var vm = new Vue({
    el: '#el',
    data: { users: usersData },
    methods: {
        getFullName: function (user) {
            return user.id + '. ' + user.firstname + ' ' + user.lastname;
        }
    },
    provide: function () {
        return {
            getFullName: this.getFullName
        }
    },
    components: {
        user: {
            template: '<span>{{ fullName }}</span>',
            inject: ['getFullName'],
            props: ['item'],
            computed: {
                fullName: function(){
                    return this.getFullName(this.item);
                }
            },
        }
    }
});

var usersData=[
{id:1，名：'John'，姓：'Doe'}，
{id:2，姓：'Martin'，姓：'Bust'}
];
var vm=新的Vue({
el:“#el”，
数据：{users:usersData}，
方法：{
getFullName:函数（用户）{
返回user.id+'.'.+user.firstname+''.+user.lastname；
}
},
提供：函数（）{
返回{
getFullName:this.getFullName
}
},
组成部分：{
用户：{
模板：“{{fullName}}”，
注入：['getFullName']，
道具：['item']，
计算：{
全名：函数（）{
返回此.getFullName（此.item）；
}
},
}
}
});

---

Fiddle:

只需在jsbin上运行此代码，它就可以工作了-它应该返回全名。我不知道您看到了什么问题？谢谢，它在jsbin上工作。使用

此选项。不过不建议使用$parent

，我不知道这样访问父函数而不使用道具是可以的。当然它会工作，您的代码片段没有问题。Vue 2.0文档建议使用

inject

和

provide

以获得更好的缩放解决方案：