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

最新推荐文章于 2023-04-20 17:37:49 发布

今天只卖大白菜

最新推荐文章于 2023-04-20 17:37:49 发布

阅读量6.9k

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/cai454692590/article/details/106027741

版权

vue 专栏收录该内容

11 篇文章 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>
<!-- 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，注意方法名不要跟其他全局函数命名一样，不然会有问题的。
如果大家有更好的思路，希望在下方评论留言，给后来人一个参考的机会。

最后

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

今天只卖大白菜

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
【Vue】html调用vue组件实例函数以及动态修改变量的值

自从用了vue.js之后，习惯了双向绑定后，已经回不去以前的传统的jstl，jquery等模式了。本博文主要为了解决某些特殊情况下，需要通过调用index.html的全局function，从而达到调用vue组件里面对应的方法，并且能够修改对应vue组件里面变量属性。特殊情况例如：写个安卓app使用webview组件，然后h5页面是使用vue框架，原生的安卓要调用页面js的方法从而达到某种目的。如果使用传统的html，我们可以写一个全局function，然后安卓那边直接调用这个function就好了。当然
复制链接

扫一扫