辛苦老师帮我看一下，为什么会报这个问题呀（已声明变量报undefined）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@next"></script>
<style>
</style>
</head>
<body>
<div id="root"></div>
</body>
<script>
let app = Vue.createApp({
setup(props, context){
const {ref,provide} = Vue;
const name = ref(name);
provide('name', name);
provide('changeName',(value)=>{
name.value = value;
})
return {name,changeName}
},
template:`
<div>
<child></child>
</div>
`
});
app.component('child',{
setup(){
const {inject} = Vue;
const name = inject('name','hello'); // 如果name没有拿到，那么默认值就是hello
const changeName = inject('changeName');
let changePN = ()=>{
changeName('Tina')
}
return {name,changeName}
},
template: '<div @click="changePN">{{name}}</div>'
})
const vm = app.mount('#root');
</script>
</html>
相关截图：
正在回答
同学你好，问答区粘贴的代码，测试后发现，报错不止一个，具体如下：
1、打开页面，首先报如下错误：
报错意思是“不能在声明name之前，就使用name”，简单理解就是"变量的使用顺序发生了错误"：
修改如下：
2、继续报如下错误：
原因是app组件中并没有声明变量changeName，所以无法导出changeName。provide只是注入变量，并不是在自身里面声明一个变量：
修改如下：
3、子组件模版中使用了变量changePN，但是没有导出该变量，代码效果不对：
修改如下：
祝学习愉快！
-
认真看之前的第二条回复，再给同学补充一下：setup中的return关键字，导出的是，组件中声明的变量。provide是注入内容，并不是声明变量。讲师代码中，没有声明changName，也没有导出changName，所以肯定不报错：
2023-11-22 17:18:59
老师的代码里没有声明changeName 只是注入了changeName 为啥不报错呢？我的却报错了相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星