在与 v-for @click 方法不同的 vue 组件中调用函数答案

【问题标题】：call a function in a different vue component from v-for @click method在与 v-for @click 方法不同的 vue 组件中调用函数
【发布时间】：2019-06-09 02:08:01
【问题描述】：

我正在尝试在另一个 vue 组件中使用我的 vue 组件中的一个方法。我已经在下面实现了一个解决方案，但是，我认为可以有一些更可重用的东西。

这是我的问题：我想从一个 vue 组件（已在实例中注册）调用一个方法，该组件位于其模板内的另一个组件中，位于 v-for 内的 @click（或替代）中。

这是我目前的解决方案：

Vue 组件 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();
}
});

实例

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组件相互连接方面遗漏了一些东西，并且一直无法通过搜索学习。

【问题讨论】：

This answer 可以帮到你
另外，@click="app.$refs.someItems...，应该是$refs.someItems...

标签： jquery laravel vue.js components

【解决方案1】：

在 Vue 中解决此问题的推荐方法是发出自定义事件或 vuex。好像您正在寻找自定义事件方法。使用此方法，您将使用来自组件 A 的有效负载发出自定义事件，在父组件中侦听该事件，然后更新组件 B 的 prop，并在组件 B 中设置一个监视，该监视将在 prop 更改和调用一个方法。

这篇文章解释得很好：

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
  }
}

【讨论】：