如何使用 vue.js 调用外部函数?直接调用函数:通过 window 对象直接调用外部函数。使用 scoped 插槽:将外部函数传递给子组件。使用 $refs:从父组件访问子组件的外部函数。
如何使用 Vue.js 调用外部函数
直接调用函数
要直接调用外部函数,可以使用 window 对象:
// <a style="color:#f60; text-decoration:underline;" href="https://www.php.cn/zt/15721.html" target="_blank">vue</a>组件实例
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() {
// 调用外部函数的逻辑
},
},
};