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

Posted 2023-02-23

【中文标题】在与 v-for @click 方法不同的 vue 组件中调用函数

【英文标题】：call a function in a different vue component from v-for @click method

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

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