$emit 从子组件到父组件 Vue 2 的事件 [英] $emit an event from child to parent component Vue 2

问题描述

我是 JS 和 Vue 的新手，所以请耐心等待 :)

I am new to JS and Vue, so please bear with me :)

我有一个使用两个 Vue 组件呈现的表，它们是父级(表 - 订单)和子级(行 - 订单).

I have a table that is rendered using two Vue components which are a parent (the table - orders) and child (the row - order).

可以在表的每一行上按下一个按钮，该按钮对该行执行 AJAX，但我还需要在执行操作时刷新表(父)，以便它具有更新的数据.

There is a button that can be pressed on each row of the table that carries out an AJAX against that row, but I also need to have the table (parent) refresh when the action is carried out so it has the updated data.

我想我需要在孩子中使用 $emit 将动作传递给父母，但我无法让它工作.这是代码(对不起，它很长，我删除了所有不必要的东西)；

I think I need to use $emit in the child to pass the action on to the parent, but I can't get it to work. Here is the code (sorry its long, I removed everything non-essential);

const order = {
    template: `
        ...// table content
        <td><button class="btn btn-default btn-sm" @click="assignAdvisor(id, 
                                       selectedOption)">Set Advisor</button></td>
    `,

    methods: {
        // following is the method that is run when the button is pressed

        assignAdvisor(id, selectedOption) {
            axios.post('url').then(response => {
                ..// show response message
                orders.$emit('refreshAfterUpdate'); // also tried  
                                                   // this.$parent.$emit(...)
            })      
    },   
};

const orders = {
    components: { order, },

    props: {
        orders: {
            type: Object,
        },
    },

    mounted() {
        // this is basically the code that I need to re-run when button is pressed,  
        // which I have repeated below in a method
        var refresh = () => {
            axios.get('/admin/ajax/unassigned-orders')
                .then(response => {
                this.ordersData = response.data;
                setTimeout(refresh, 5000);
            });
        }
        refresh();
    },

    methods: {
        refreshAfterUpdate() {
            axios.get('/admin/ajax/unassigned-orders')
            .then(response => {
            this.ordersData = response.data;
            console.log(response);
            });
        },
    }
};

new Vue({
    render(createElement) {
        const props = {
            orders: {
                type: Object,
            },
        };
        return createElement(orders, { props });
    },
}).$mount('#unassignedOrders');

我没有收到任何错误消息或任何内容 - 它不起作用.

I don't get any error message or anything - it just doesn't work.

谢谢

推荐答案

好的，感谢@Patrick Steele，我已经弄明白了.

OK so thanks to @Patrick Steele I have figured it out.

我没有使用 $on - 哎呀.

I was not using $on - oops.

向mounted()部分添加了代码，现在可以工作了:

Added code to the mounted() section and it now works:

const order = {
    template: `
        ...// table content
        <td><button class="btn btn-default btn-sm" @click="assignAdvisor(id, 
                                       selectedOption)">Set Advisor</button></td>
    `,

    methods: {
        // following is the method that is run when the button is pressed

        assignAdvisor(id, selectedOption) {
            axios.post('url').then(response => {
                ..// show response message
                orders.$emit('refreshAfterUpdate'); // also tried  
                                                   // this.$parent.$emit(...)
            })      
    },   
};

const orders = {
    components: { order, },

    props: {
        orders: {
            type: Object,
        },
    },

    mounted() {
        // this is basically the code that I need to re-run when button is pressed,  
        // which I have repeated below in a method
        var refresh = () => {
            axios.get('/admin/ajax/unassigned-orders')
                .then(response => {
                this.ordersData = response.data;
                setTimeout(refresh, 5000);
            });
        }
        refresh();

            $this.on('refreshAfterUpdate', () => {
                axios.get('/admin/ajax/unassigned-orders')
                .then(response => {
                this.ordersData = response.data;
                console.log(response);
                });
            },
        },
    },


};

new Vue({
    render(createElement) {
        const props = {
            orders: {
                type: Object,
            },
        };
        return createElement(orders, { props });
    },
}).$mount('#unassignedOrders');

这篇关于$emit 从子组件到父组件 Vue 2 的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！