使用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)
}