我们以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>
网友回复
python如何实现torrent的服务端进行文件分发p2p下载?
如何在浏览器中录制摄像头和麦克风数据为mp4视频保存下载本地?
go如何编写一个类似docker的linux的虚拟容器?
python如何写一个bittorrent的种子下载客户端?
ai能通过看一个网页的交互过程视频自主模仿复制网页编写代码吗?
ai先写功能代码通过chrome mcp来进行测试功能最后ai美化页面这个流程能行吗?
vue在手机端上下拖拽元素的时候如何禁止父元素及body的滚动导致无法拖拽完成?
使用tailwindcss如何去掉响应式自适应?
有没有直接在浏览器中运行的离线linux系统?
nginx如何保留post或get数据进行url重定向?