Изменение или доступ к Vue.метод js из внешнего скрипта

Изменение или доступ к Vue.метод js из внешнего скрипта

28.01.2020 04:47:13 Просмотров 38 Источник

У меня есть приложение Vue, которое построено на Webpack. Компонент имеет пару простых вычисляемых свойств, таких как получение суммы из входных данных. Но теперь мне нужно сделать возможным замену функции суммирования из внешнего файла, не связанного с текущей сборкой, а также возможность добавления кнопок (и) других функций из этого файла в текущий шаблон - вычитание, умножение, деление в зависимости от флагов (Скрыть / показать), установленных из внешнего файла. Как лучше всего к нему подойти? Есть какие-нибудь мысли?

Спасибо

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59950234/change-or-access-vue-js-method-from-external-script#comment106020862_59950234
Самый лучший способ-это переработать ваш компонент Vue, чтобы справиться с этим. Подход, к которому вы сейчас стремитесь, не является архитектурно обоснованным. Это приведет к созданию внешних зависимостей, которые по мере роста вашей базы кода, скорее всего, вызовут у вас серьезные головные боли. Кроме того, создайте новый компонент Vue, который будет действовать как оболочка и инкапсулировать внешний сценарий и другой компонент.
https://stackoverflow.com/questions/59950234/change-or-access-vue-js-method-from-external-script#comment106022198_59950234
В реальном проекте я согласен, но это техническая проверка перед собеседованием. До сих пор я не мог придумать ничего лучше, чем переместить функции из внешнего файла js в localstorage

Ответы - Изменение или доступ к Vue.метод js из внешнего скрипта / Change or Access Vue.js method from external script

Является ответом!
muka.gergely

28.01.2020 10:33:05

Я не думаю, что это плохая идея-иметь свои функции вне вашего .компоненты vue. Таким образом, гораздо проще создавать чистые компоненты и просто экспортировать эти функции из этих файлов - ваших .компоненты vue могут импортировать их. (Но я думаю, что это самоуверенный шаблон, который вы либо используете, либо не используете.)

Приведенный ниже фрагмент только показывает, что легко добавить внешние функции к компонентам Vue (или экземпляру в этом случае):

const sumFunction = (a, b) => {
  return a + b
}

new Vue({
  el: "#app",
  computed: {
    result() {
      return sumFunction(Number(this.a), Number(this.b))
    }
  },
  data() {
    return {
      a: 0,
      b: 0
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="number" v-model="a" /><br />
  <input type="number" v-model="b" /><br /> a + b = {{result}}
</div>

Итак, ваши файлы могут выглядеть примерно так:

внешняя функция.JS:

export const sumFunction = (a, b) => {
  return a + b
}

sumTemplate.вю:

<template>
  <div>
    <input type="number" v-model="a" /><br />
    <input type="number" v-model="b" /><br />
    a + b = {{result}}
  </div>
</template>
<script>
import { sumFunction } from "@externalFunction"

export default {
  computed: {
    result() {
      return sumFunction(Number(this.a), Number(this.b))
    }
  },
  data() {
    return {
      a: 0,
      b: 0
    }
  }
}
</script>

Единственное, что следует подчеркнуть: при такой настройке юнит-тесты играют еще более важную роль . Вы должны следить за входами и выходами ваших функций, чтобы при их изменении никакие компоненты не ломались.

https://stackoverflow.com/questions/59950234/change-or-access-vue-js-method-from-external-script/59955811#comment106041960_59955811
Спасибо! Это решает проблему.
https://stackoverflow.com/questions/59950234/change-or-access-vue-js-method-from-external-script/59955811#comment106044307_59955811
Я счастлив, что смог помочь. Не забывайте, что VueJS делает для вас много вещей, но это JavaScript под капотом - это означает, что вы можете делать все, что JS позволяет вам делать .
Закрыть X