时间戳

首页 > 解决方案 > 使用 Vuejs 和普通的 Javascript (vanilla)

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

问题描述

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

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

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

标签： javascriptphpjqueryvue.js

解决方案

模板只能访问 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在模板中使用。

推荐阅读