VueJS如何使用组件中的父方法答案

【问题标题】：VueJS How to use parent method from componentVueJS如何使用组件中的父方法
【发布时间】：2017-03-12 18:51:24
【问题描述】：

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

这是 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);
                }
            },
        }
    }
});

VueJS 版本：2.0.2

this.$parent.$options.methods.getFullName() 和 this.$parent.methods.getFullName() 都不起作用。

【问题讨论】：

只需在 jsbin 上运行这段代码就可以了——它应该返回全名。我想知道你看到了什么问题？
谢谢，它可以在 jsbin 上运行。
虽然不推荐使用this.$parent，但我不知道在没有道具的情况下以这种方式访问父函数是否可以。当然可以，您的代码 sn-p 没有任何问题。
Vue 2.0 文档建议使用 inject 和 provide 以获得更好的扩展解决方案：vuejs.org/v2/guide/…

标签： javascript vue.js vue-component

【解决方案1】：

对于 Vue.js 版本 2.2.0+，您可以像这样使用 inject 和 provide 的依赖注入：

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);
                }
            },
        }
    }
});

小提琴：https://jsfiddle.net/haaiee/v1ahoytm/2/

【讨论】：