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



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

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