vue调用js方法
Vue.js一个渐进式的JavaScript架，它可被用于创建前端应用程序。它的优点包括数据驱动、组件化、可维护性、可测试性等。在工作中，有时候需要在 Vue用程序内调用原生的 JavaScript法。在本文中，我们将主要来讨论 Vue何调用原生的 JavaScript法。
### 一、使用全局的方法
最简单的一种方法是 Vue局调用 JavaScript生方法，即在 Vue 中挂载到 window 下的方法，例如：
```javascript
// window 下挂载一个全局方法
window.sayHello = function () {
console.log(Hello, Vue!
}
```
然后，在 Vue组件中调用该方法：
```javascript
mounted () {
// Vue用 JavaScript生方法
window.sayHello()
}
```
使用这种方法，你可以将所有的 JavaScript法挂载到 window 上，而不需要考虑如何向 Vue 传递参数，只要在 Vue 中直接调用就可以了。这种方式简单易行，但也有一些缺点，例如：
-局污染：每次添加一个 JavaScript法都会影响全局变量，如果不小心，很容易引起全局变量冲突；
-维护性：如果有多个组件要使用同一个 JavaScript生方法，则需要在每个组件中都添加这样的代码，可维护性比较差。
### 二、设置属性
Vue 也可以使用属性的方式来调用 JavaScript生的方法，例如：
```javascript
Vueponent(my-component {
data () {
return {
sayHelloFunc: function () {
console.log(Hello, Vue!
}
}
},
mounted () {
this.sayHelloFunc()
}
})
```
使用这种方法，可以设置一个属性（sayHelloFunc），该属性的值是一个函数，然后在 mounted子函数中调用这个函数即可。这种方式有以下优点：
- 不会发生全局污染：使用这种方式， JavaScript法被封装在 Vue件内，不会影响全局环境；
-维护性：Vue件之间是可以共享的，一个原生 JavaScript法只需要在一个组件中定义即可，其它组件都可以共享。
### 三、传递参数
js调用方法的三种写法 在调用 JavaScript生方法时，有时候需要传递一些参数，例如：
```javascript
Vueponent(my-component {
data () {
return {
sayHelloFunc: function (param) {
console.log(Hello, + param)
}
}
},
mounted () {
let param = Vue
this.sayHelloFunc(param)
}
})
```
在上面的例子中，我们调用的 sayHelloFunc法接受一个参数，我们可以在 mounted子函数中，将参数传递给该方法，即可实现原生方法调用。
###、使用插件
Vue 中也有一些现成的插件可以用来调用原生 JavaScript法，例如：vue-native-helper。使用插件方式，可以更加便捷地调用原生 JavaScript法，例如：
```javascript
// 使用插件
import VueNativeHelper from vue-native-helper
Vue.use(VueNativeHelper)
//组件中调用原生方法
mounted () {
// Vue用 JavaScript生方法
this.$native(function () {
console.log(Hello, Vue!
})
}
```
使用插件的优点在于，它简化了原生方法的使用，我们可以直接在 Vue 中使用 $native数，无需定义属性和函数，直接调用即可。
### 五、总结
本文介绍了 Vue何调用原生的 JavaScript法的几种方法，从而可以更加灵活的在 Vue 中使用原生的 JavaScript法。从上面的分析，我们可以得出以下结论：
- 使用全局变量的方式最简单，但存在全局污染和可维护性差的问题；
-置属性的方式可以解决全局污染问题，但也要在每个组件中都定义一遍，这样可行性就不是特别高；
- 传递参数的方式可以使用在调用原生方法时传递参数，但其实也可以用设置属性的方式实现；
- 使用插件的方式，可以在插件中封装多个 JavaScript法，简化 Vue 中的调用，可维护性更高。
因此，在实际的开发中，要根据需求来选择合适的方式，以实现原生 JavaScript法调用。
发表评论