自从用了vue.js之后,习惯了双向绑定后,已经回不去以前的传统的jstl,jquery等模式了。
本博文主要为了解决某些特殊情况下,需要通过调用index.html的全局function,从而达到调用vue组件里面对应的方法,并且能够修改对应vue组件里面变量属性。
特殊情况例如:写个安卓app使用webview组件,然后h5页面是使用vue框架,原生的安卓要调用页面js的方法从而达到某种目的。如果使用传统的html,我们可以写一个全局function,然后安卓那边直接调用这个function就好了。当然使用vue框架也是这个原理,但是要稍微绕点圈子。
index.html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue_web_demo</title>
</head>
<body>
<div id="app">
</div>
<!-- built files will be auto injected -->
<script>
//全局函数
function openDialog(num) {
warning(num);
}
</script>
</body>
</html>
text.vue 组件代码
<template>
<div>
<el-input type="text" v-model="text" auto-complete="off"></el-input>
<el-button type="info" class="resetBtn" @click="resetForm">测试</el-button>
</div>
</template>
<script>
export default {
data() {
return {
num: 1,
text: "this is text"
}
},
//初始化加载
mounted: function () {
//绑定全局函数(可以理解为函数监听初始化)
this.loginAlert();
},
//具体js方法
methods: {
//绑定全局函数(可以理解为函数监听初始化)
loginAlert() {
const that = this;
//声明全局函数
window.warning = function (data) {
console.log(data);
//在全局函数里面调用当前实例的函数方法
that.getCount(data);
}
},
//组件函数方法
getCount(data) {
//直接对当前实例变量修改
this.text = data;
console.log(this.text);
},
//调用全局函数 即index.html的openDialog函数
resetForm() {
this.num = this.num + 1;
openDialog(this.num);
}
}
}
</script>
简要说明
上面两个代码实际上功能是,点击“测试”按钮。
- 先调用text.vue组件的resetForm方法,
- 然后调用index.html页面的全局方法 openDialog,
- openDialog方法又调用了全局方法warning,
- 因为全局方法warning又绑定了当前text.vue组件的getCount方法。
- 最后通过getCount方法修改当前text.vue的属性变量
实际上,我们如果想使用安卓调用text.vue的方法或者修改组件变量属性的话,其实是从第2步开始直接在安卓原生代码调用openDialog的全局js函数,从而达到修改text.vue属性变量的值
小细节
- index.html页面的函数openDialog已经是全局函数了,在任何vue组件里面都可以直接调用。
- text.vue通过loginAlert方法,声明全局函数与本实例函数绑定,从而达到外部调用js,修改当前组件的属性变量。
- 组件里面声明全局函数warning,注意方法名不要跟其他全局函数命名一样,不然会有问题的。
- 如果大家有更好的思路,希望在下方评论留言,给后来人一个参考的机会。
最后
一般情况都不建议这样写,除非某些特殊情况下才写吧。。。。