Как повторно использовать метод: определить в основном объекте и вызвать из всех компонентов в VueJS

Я использую родительские дочерние компоненты с 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.

В противном случае я получаю сообщение об ошибке: «метод добавления не определен».

Есть ли какое-либо решение для единого объявления и запуска из компонентов?

Как это возможно или какое-то другое решение для этого?


javascript vue.js vuejs2 vue-component
person Shankar Thiyagaraajan    schedule 15.12.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Функция, которую вы ищете, называется миксинами в vue JS.

Миксины - это гибкий способ распространения многоразовых функций для компонентов Vue. Объект миксина может содержать любые параметры компонента. Когда компонент использует миксин, все параметры миксина будут «смешаны» с собственными опциями компонента.

Таким образом, вы можете добавить метод в миксин, и он будет доступен во всех компонентах, в которых будет смешиваться миксин. См. Следующий пример:

// 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')
  }
})
person Saurabh    schedule 15.12.2016