vue怎么调用外部函数

百变鹏仔 3个月前 (09-25) #VUE

文章标签函数

如何使用 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怎么调用外部函数

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器