脚本标记中的vue.js 3单个文件组件的调用方法

Levi007:

可以说我有一个像这样的单个文件组件:

<template>
  // doesn't matter
</template>

<script>
export default {
  data() {
    return {
      redStates: [
        "Isfahaan",
        "Qom",
        "Tehraan",
        "Semnaan",
        ...
      ],
    };
  },
  methods: {
    colorize(paths) {
      paths.forEach((path) => {
        if (this.redStates.indexOf(path.getAttribute("class")) !== -1) {
          path.setAttribute("class", "red");
        }
      });
    },
  },
};

window.onload = () => {
  const paths = document.querySelectorAll(".Provinces path");
  paths.forEach((path) => {
    if (this.redStates.indexOf(path.getAttribute("class")) !== -1) {
      path.setAttribute("class", "red");
    }
  });
};
</script>
<style >
  ...
</style>

有没有办法在“导出默认值”之外访问方法(在这种情况下为“ colorize”)?(在这种情况下为“ window.onload”事件)

感想:

您可以将事件侦听器定义移动created生命周期的方法,即到组件的定义,在这里你可以访问colorize使用this.colorize

data() {...},
created () {
  window.onload = () => {
    const paths = document.querySelectorAll(".Provinces path");
    this.colorize(paths);
  }
},
methods: ...

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

从组件外部调用Vue.js组件方法

Vue.js加载单个文件组件

Vue.js单个文件组件,无需构建过程

如何使用Vue.js从单个文件组件中的方法访问计算属性

Vue.js单个文件组件中的Mapbox-gl(Quasar框架)

使用Vue在单个文件组件中调用render方法

Vue组件中未调用Vue.js ready()方法

在PhpStorm中的单个文件组件Vue.js中进行Lint SCSS / SASS

如何在Vue.js中动态挂载单个文件组件

Vue.js-在单个文件组件中使用子组件

Vue.js:是否应该将脚本或模板放在单个文件组件中以提高生产率?

Vue.js单个文件组件中的数据获取

从vue.js组件中创建的钩子调用方法

Vue.js单个文件组件“名称”在使用者中不被接受

vue.js 2-将单个文件组件的html片段提取到独立文件中

Vue.js调用组件/实例方法

在vue js单个文件组件中导入CSS时出错

Vue Js-在单个Vue组件中的多个js文件中拆分method.js

Vue从多个文件中的单个.js文件拆分组件

Svelte.js组件属性在具有customElenent的脚本标记中未定义:true

无法访问Vue文件的脚本标记中的CSS变量

来自main.js的全局组件的Vue js调用方法

从 Vue.js 组件调用方法

在 Vue.js 中动态挂载单个文件组件

无法从 Vue.js 中的单个文件组件导入 Mixin

标记多个图标中的单个图标 - vue.js

Svelte.js 组件属性在带有 customElement: true 的脚本标记中未定义

如何从带参数的 JS 文件调用 Blazor 组件中的 C# none 静态方法?

如何将 JS 文件中的方法调用到 Angular 组件中