Question

我将父子组件与vueJs一起使用。我目前必须为多个组件单独定义一个方法。

但是，我只想在一个地方定义它并在多个地点使用。

我的父模板是，

<campaign_segment :a=add(1,2)> </campaign_segment>

父模板的来源，

<template v-if="showTemplate" id="segment_body"> </template>

在VueJS中，

   Vue.component(
   'campaign_segment', {
     template: '#segment_body',
     props: ['a'],
     methods:{
       add: function(a,b){
          return parseInt(a) + parseInt(b);
       }
     }
  });

在这里，我应该将方法“add（）”定义到我的主vuejs对象。

否则我收到错误消息“添加方法未定义”。

是否存在单一声明的解决方案，以及来自组件的触发器？

怎么可能或者其他任何解决办法？

Answer 1

您正在寻找的功能在vue JS中称为mixins。

Mixins是一种为Vue组件分发可重用功能的灵活方式。 mixin对象可以包含任何组件选项。当组件使用mixin时，mixin中的所有选项都将“混合”到组件自己的选项中。

因此，您可以在mixin中添加一个方法，它将在所有组件中可用，其中mixin将被混合。请参阅以下示例：

// define a mixin object
var myMixin = {
  methods: {
       add: function(a,b){
          return parseInt(a) + parseInt(b);
       }
  }
}

// define a component that uses this mixin
var Component = Vue.extend({
  mixins: [myMixin]
})

// alternate way to have a mixin while initialising
new Vue({
  mixins: [myMixin],
  created: function () {
    console.log('other code')
  }
})

如何重用方法：在主对象中定义并从VueJS

1 个答案: