vue怎么调用外部函数-Vue.js-PHP中文网

vue怎么调用外部函数

下次还敢

发布： 2024-05-27 04:36:17

原创

958人浏览过

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

vue怎么调用外部函数

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

直接调用函数

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

<code class="js">// vue组件实例
export default {
  methods: {
    callExternalFunction() {
      window.externalFunction();
    },
  },
};</code>

登录后复制

使用 scoped 插槽

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

阿里云-虚拟数字人

阿里云-虚拟数字人是什么？ ...

查看详情

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

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

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

登录后复制

使用 $refs

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

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

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

登录后复制

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