我们以cdn版本的vue写一个示例:
子组件remote-component.js
// remote-component.js ({ // 注意这里要用括号包裹对象 name: 'remote-component', template: ` <div> <h1>{{ title }}</h1> <button @click="onClick">点击</button> </div> `, data: function() { // Vue2 中 data 必须是函数 return { title: '远程组件' } }, methods: { onClick() { alert('按钮被点击'); } } })
远程调用子组件的页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1-dev.js"></script> </head> <body> <div id="app"> <remote-component-loader :url="componentUrl"></remote-component-loader> </div> <script> // 组件加载器实现 Vue.component('remote-component-loader', { template: ` <div> <component v-if="componentData" :is="componentData" v-bind="$attrs" v-on="$listeners" ></component> <div v-else-if="error">{{ error }}</div> <div v-else>加载中...</div> </div> `, props: { url: { type: String, required: true } }, data() { return { componentData: null, error: null } }, created() { this.loadComponent(); }, methods: { loadComponent() { fetch(this.url) .then(response => response.text()) .then(componentStr => { try { this.componentData = eval(componentStr); } catch (err) { this.error = '组件格式错误: ' + err.message; console.error('组件解析失败:', err); } }) .catch(err => { this.error = '加载失败: ' + err.message; console.error('加载失败:', err); }); } }, watch: { url: { handler: 'loadComponent' } } }); // Vue 实例 new Vue({ el: '#app', data: { componentUrl: '/asset/remote-component.js'//远程子组件的URL地址 } }); </script> </body> </html>
网友回复
如何编写一个chrome插件实现多线程高速下载大文件?
cdn版本的vue在网页中出现typeerror错误无法找到错误代码位置怎么办?
pywebview能否使用webrtc远程控制共享桌面和摄像头?
pywebview6.0如何让窗体接受拖拽文件获取真实的文件路径?
如何在linux系统中同时能安装运行apk的安卓应用?
python有没有离线验证码识别ocr库?
各家的ai图生视频及文生视频的api价格谁最便宜?
openai、gemini、qwen3-vl、Doubao-Seed-1.6在ui截图视觉定位这款哪家更强更准?
如何在linux上创建一个沙箱隔离的目录让python使用?
pywebview如何使用浏览器自带语音识别与webspeech 的api?