<!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>
24Vue 中的app.version、 app.provide 与 app.runWithContext实例剖析.zip （6个子文件） 
24Vue 中的app.version、 app.provide 与 app.runWithContext实例剖析 09app.runWithContext js 
vue.global.js 525KB
index.html 2KB 10app.version js vue.global.js 525KB index.html 568B 08app.provide js vue.global.js 525KB index.html 1KB资源评论
