Vue中的app.version、app.provide与app.runWithContext实例剖析

共6个文件

js：3个

html：3个

vue.js

需积分: 5 200 浏览量 2024-08-12 16:53:28 上传评论收藏 349KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

24Vue 中的app.version、 app.provide 与 app.runWithContext实例剖析.zip （6个子文件）

24Vue 中的app.version、 app.provide 与 app.runWithContext实例剖析

09app.runWithContext

vue.global.js 525KB

index.html 2KB

10app.version

vue.global.js 525KB

index.html 568B

08app.provide

vue.global.js 525KB

index.html 1KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>app.runWithContext</title> <script src="js/vue.global.js"></script> </head> <body> <div id="app"> <my-component></my-component> <app-box></app-box> </div> </body> <script> // 在 Vue 3中，inject应该从vue中引入。 const {createApp,inject}=Vue; const rootComponent={}; const app=createApp(rootComponent); // 定义共享数据 const shareData={ name:'Lucy', age:32 } const shareMethod={ formatData:(data)=>{ return ` 处理后的数据：${data} `; } } // 提供共享数据 app.provide('userInfo',shareData); app.provide('shareMethod',shareMethod); // 定义全局组件 const myComponent={ template:` <div> <p>姓名：{{userInfo.name}}</p> <p>{{shareMethod.formatData('初始数据')}}</p> </div> `, data(){ return { userInfo:app.runWithContext(()=>{ return inject('userInfo'); }), shareMethod:app.runWithContext(()=>{ return inject('shareMethod'); }) } } } const appBox={ template:` <div> <p>年龄：{{userInfo.age}}</p> </div> `, data(){ return{ userInfo:app.runWithContext(()=>{ return inject('userInfo'); }), } } } // 注册组件 app.component('my-component',myComponent); app.component('app-box',appBox); app.mount('#app'); </script> </html>

评论收藏

内容反馈