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

如何使用 Vue.js 调用外部函数
直接调用函数
要直接调用外部函数,可以使用 window 对象:
// vue组件实例
export default {
methods: {
callExternalFunction() {
window.externalFunction();
},
},
};使用 scoped 插槽
立即学习“前端免费学习笔记(深入)”;
如果你需要将外部函数传递给子组件,可以使用 scoped 插槽:
// 父组件
export default {
template: `
`,
methods: {
callExternalFunction() {
// 调用外部函数的逻辑
},
},
};
// 子组件
export default {
template: `
`,
props: ['callExternalFunction'],
methods: {
callExternalFunction() {
this.$props.callExternalFunction();
},
},
};使用 $refs
如果你需要从父组件访问子组件的外部函数,可以使用 $refs:
// 父组件
export default {
template: `
`,
methods: {
callExternalFunctionFromChild() {
this.$refs.child.callExternalFunction();
},
},
};
// 子组件
export default {
template: `
`,
methods: {
callExternalFunction() {
// 调用外部函数的逻辑
},
},
};










