如何使用 vue.js 调用外部函数？直接调用函数：通过 window 对象直接调用外部函数。使用 scoped 插槽：将外部函数传递给子组件。使用 $refs：从父组件访问子组件的外部函数。

如何使用 Vue.js 调用外部函数

直接调用函数

要直接调用外部函数，可以使用 window 对象：

// vue组件实例
export default {
  methods: {
    callExternalFunction() {
      window.externalFunction();
    },
  },
};

使用 scoped 插槽

立即学习“前端免费学习笔记（深入）”；

如果你需要将外部函数传递给子组件，可以使用 scoped 插槽：

// 父组件
export default {
  template: `
    <child-component :call-external-function="callExternalFunction"></child-component>
  `,
  methods: {
    callExternalFunction() {
      // 调用外部函数的逻辑
    },
  },
};

// 子组件
export default {
  template: `
    <button>调用外部函数</button>
  `,
  props: ['callExternalFunction'],
  methods: {
    callExternalFunction() {
      this.$props.callExternalFunction();
    },
  },
};

使用 $refs

如果你需要从父组件访问子组件的外部函数，可以使用 $refs：

// 父组件
export default {
  template: `
    <child-component ref="child"></child-component><button>从子组件调用外部函数</button>
  `,
  methods: {
    callExternalFunctionFromChild() {
      this.$refs.child.callExternalFunction();
    },
  },
};

// 子组件
export default {
  template: `
    <button>调用外部函数</button>
  `,
  methods: {
    callExternalFunction() {
      // 调用外部函数的逻辑
    },
  },
};

以上就是vue怎么调用外部函数的详细内容，更多请关注php中文网其它相关文章！