javascript - 使用 Vuejs 和普通的 Javascript (vanilla)

Question

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

网上的解决方案是将普通的javascript函数插入到Vue组件中(意思是将所有东西都移到Vue中)，但是有些函数太大或太复杂而无法重构到Vue。

因此，我需要一种在 Vanilla Javascript 和 Vue 之间处理变量和函数的方法，同时我将所有内容都移至 Vue。

Answer 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)
}