вызвать функцию в другом компоненте vue из метода v-for @click

Question

Я пытаюсь использовать метод из одного из моих компонентов vue в другом компоненте vue. Я реализовал решение ниже, однако, я думаю, что может быть что-то более пригодное для повторного использования.

Вот моя проблема: я хочу вызвать метод из одного компонента vue (который зарегистрирован в экземпляре) в другом компоненте внутри его шаблона в виде @click (или альтернативы) внутри v-for.

Это мое текущее решение:

Vue Component 1 (это компонент, выполняющий вызов):

Vue.component('person-list', {
    props: ['user_id', 'token'],
    template: '<div>' +
        '<ul>' +
        '<li v-for="person in persons" :data-id="person.lk_ID" 
class="someItems-list-item">{{ person.name }}</li>' +
        '</ul>' +
        '</div>',
    data: function(){
        return {
            persons: null,
        }
    },
    methods: {
        //some code
    },
    mounted: function(){
        console.log('mounted list');
    }
});

Vue Компонент 2

var someItems= Vue.component('someItems-items-list', {
    props: ['g_id', 'token'],
    template: '<div>' +
    '<ul>' +
    '<li v-for="item in someItems">{{ item.name }}</li>' +
    '</ul>' +
    '</div>',
data: function(){
    return {
        someItems: null,
    }
},
methods: {
    callFunction: function (ID = null){
        this.$http.post('route', {someID: ID, _token: this.token}).then(function(response){
            this.someItems= response.body.items;
        });
    },
},
mounted: function(){
    this.callFunction();
}
});

Instance

const app = new Vue({
    el: '#app',
    components: {
        'someItems-items-list': someItems,
    },
});

Решение в Jquery

$(document).on('click','.someItems-list-item',function () {
   app.$refs.someItems.callFunction($(this).data('id'));
});  

Это решение прекрасно работает, и его не так уж много, но я думаю, что его было бы проще и проще поддерживать, если бы я мог вызывать callFunction () следующим образом:

Vue Компонент 1

template: '<div>' +
        '<ul>' +
        '<li v-for="person in persons" @click="app.$refs.someItems.callFunction(person.lk_ID)">{{ person.name }}</li>' +
        '</ul>' +
        '</div>',

Однако, когда я пытаюсь это сделать, он говорит, что приложение не определено. Я также попробовал выше с этим:

Vue Компонент 1

return {
        //other code,
        this.someItems: someItems,
    }

А потом звонит @click="someItems.callFunction(1)" но это тоже не работает. Все эти компоненты находятся внутри app.js. Я работаю с laravel, vue, jquery.

Мне кажется, что я что-то упускаю из-за того, как соединить два компонента vue друг с другом, и не смог узнать это из поиска.

Answer 1

Рекомендованный способ достижения этого в Vue - с помощью создания пользовательских событий или vuex. Похоже, вы ищете индивидуальный подход к событию. С помощью этого метода вы будете генерировать пользовательское событие с полезной нагрузкой от компонента A, прослушивать это событие в родительском компоненте, а затем обновлять реквизит компонента B и настраивать функцию наблюдения в компоненте B, которая будет реагировать при изменении реквизита и вызвать метод.

Эта статья объясняет это хорошо:

https://www.telerik.com/blogs/how-to-emit-data-in-vue-beyond-the-vuejs-documentation

Наиболее важными частями являются:

//emit from component A
this.$emit('update-cart', item)

//setup listener in parent
<componentA @update-cart="updateCart">
updateCart(e) {
    this.cart.push(e);
    this.total = this.shoppingCartTotal;
  },

//setup componentB with prop from parent
<componentB :total="total">

//have watch in componentB
props: ['total'],
watch:{
  total:function(val){
    //call fn with new val
  }
}