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

Posted 2023-02-23

【中文标题】VueJS如何使用组件中的父方法

【英文标题】：VueJS How to use parent method from component

【发布时间】：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/…

【参考方案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/