【Vue】html调用vue组件实例函数以及动态修改变量的值

小灰灰 2021-01-19 15:26 1084阅读 0赞

自从用了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>
    
    
    <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>

### 简要说明 ###

上面两个代码实际上功能是，点击“测试”按钮。

1.  先调用**text.vue**组件的**resetForm**方法，
2.  然后调用**index.html**页面的全局方法 **openDialog**，
3.  **openDialog方法**又调用了**全局方法warning**，
4.  因为**全局方法warning**又绑定了当前**text.vue**组件的**getCount**方法。
5.  最后通过**getCount**方法修改当前**text.vue的属性变量**

实际上，我们如果想使用安卓调用text.vue的方法或者修改组件变量属性的话，其实是从**第2步**开始直接在安卓原生代码**调用openDialog的全局js函数**，从而达到修改text.vue属性变量的值

### 小细节 ###

1.  index.html页面的函数openDialog已经是全局函数了，在任何vue组件里面都可以直接调用。
2.  text.vue通过**loginAlert方法**，声明全局函数与本实例函数绑定，从而达到外部调用js，修改当前组件的属性变量。
3.  组件里面声明全局函数**warning**，注意方法名不要跟其他全局函数命名一样，不然会有问题的。
4.  如果大家有更好的思路，希望在下方评论留言，给后来人一个参考的机会。

### 最后 ###

一般情况都不建议这样写，除非某些特殊情况下才写吧。。。。