使用 Vuejs 和普通的 Javascript (vanilla)答案

【问题标题】：Work with Vuejs and normal Javascript (vanilla)使用 Vuejs 和普通的 Javascript (vanilla)
【发布时间】：2021-02-11 10:21:06
【问题描述】：

我需要使用Vue并在普通javascript中调用另一个函数，还需要更改Vue中的一些变量，然后在Javascript中读取它们。

网上的解决方法是把普通的javascript函数插入到一个Vue组件中（意思是把所有东西都移到Vue中），但是有些函数太大或者太复杂，无法重构到Vue。

所以，我需要一种方法来处理 Vanilla Javascript 和 Vue 之间的变量和函数，同时我将所有内容都转移到 Vue。

【问题讨论】：

move everything to Vue ... 不 ... Vue 不是一种不同的语言 ... 它只是“普通” javascript ...您可以使用现有函数而无需“将它们移动到 vue” - 通过如果你使用 jquery 和 vue 的方式，你可能编程错误
我正在将所有内容都迁移到 Vue，但不能同时执行所有操作，将所有内容迁移到 Vue 需要几个月的时间，并且网站需要继续运行，直到我将所有内容迁移到 Vue，我需要同时使用

标签： javascript php jquery vue.js

【解决方案1】：

过了一会儿，我找到了解决方案（解决方法）：

我知道在普通 javascript、PHP、Laravel 和 Vuejs 之间进行通信的唯一方法是使用 html 标签作为中介，你可以通过它们做各种事情。

您可以将 vue 中的任何值设置为隐藏输入或任何 DOM 数据，然后从 javascript 中读取，您还可以从 Vue 中触发 DOM 事件，并在常规 Javascript 中执行它们。

这是一个解决方法，因为这不是 Vuejs 的最佳使用，但是如果您需要使用 Vue 并且仍然使用普通的 javascript，希望这对您有所帮助。

例如，触发 vue 中的变量更改为 Javascript：

在你的 Vue 组件中：

<template>

    <input type="text" v-model="my_value" onchange="vanillaFunction(this.value)">

</template>

<script>

export default {
    name: 'test-vue',
    data: function (){
        return {
            my_value: 'start',
        }

    },
    created: function () {
        this.my_value = 'finish'
    },
    mounted: function () {
        this.my_value = 'mounted'
    },
    watch: {
        my_value: function (val) {
            $("input#my_value").trigger('change')
        },
    },
};

</script>

在您的 javascript 文件中：

function vanillaFunction(value){
    console.log('Vue has changed the value to: ' + value)
}

【讨论】：

或@change="vue_method_that_calls_vanilla" 并有一个method: vue_method_that_calls_vanilla() {} 调用vanillaFunction - 这样您就可以使用没有onchange HTML 事件处理程序的组件
但是 vanillaFunction 需要是组件内部的方法，如果是外部函数将不起作用
取决于你如何导入/加载这些“vanilla”函数——如果它们是使用常规<script>标签加载的，那么在这些文件中声明的任何“全局范围”函数都可用于vue代码（不是@change="xxx"，而是例如一个vue method: a() { xxx() })

【解决方案2】：

模板只能访问 Vue 实例的上下文。换句话说，this 在您的组件中所指的内容。如果您想在模板中使用全局上下文中的任何内容，请在 computed 中重新声明它，使用返回全局引用的箭头函数：

computed: {
  vanillaFunction: () => vanillaFunction
}

看看它的工作原理：

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  computed: {
    window: () => window,
    console: () => console,
    vanillaFunction: () => vanillaFunction
  }
})

<script>
  function vanillaFunction() {
    console.log('Boo!');
  }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <button @click="vanillaFunction">vanillaFunction</button>
  <button @click="console.log(window.console.warn('You scared me!') || '¯\\_(ツ)_/¯')">console, window</button>
</div>

window、console 和 vanillaFunction 在全局上下文中声明并且通常不能在您的模板中使用，现在可以直接在模板中使用。

在模板中使全局函数可用的另一种方法是将它们声明为methods。但是，由于方法必须是函数，所以它只适用于函数，而computed 可以声明任何全局对象或类。

将其视为方法：

Vue.config.devtools = false;
Vue.config.productionTip = false;
new Vue({
  el: '#app',
  data: () => ({
    my_value: ''
  }),
  methods: {
    vanillaFunction
  }
})

<script>
  function vanillaFunction(value) {
    console.log('Vue has changed the value to: ' + value)
  }
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="my_value" @input="vanillaFunction(my_value)">
</div>

补充说明：不要在模板中使用this。

【讨论】：