(注意子组件不能用这个传给父组件,两个组件都有provide和inject函数是因为我要测试他是不是都可以用)结果是不可以滴
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app" >
<son></son>
{{sonData}}
</div>
</body>
<script src="js/vue3.js"></script>
<script>
const son={
setup(props,context){//响应式必须要有.value才能改值
const {inject,provide,ref}=Vue;//从vue解构出函数
let getEle=inject("myEle");
const sonFunc=inject("myFunc");
let myabc="子的数据";
console.log(getEle);
const changeName=()=>{
sonFunc("爸比的函数");
}
return{
getEle,changeName,myabc
}
},
template: `<div>{{getEle}}
<button type="button" @click="changeName">点我</button>
</div>`
};
const app=Vue.createApp({
setup(props,context){
const {ref,provide,readonly,inject}=Vue;
let myEle=ref("来自父组件的数据");
provide("myEle",readonly(myEle));
//把数据发射出去同时,避免子组件改父组件的值
//也可以发送事件
const myFunc=(aa)=>{
console.log(aa);
};
provide("myFunc",myFunc);//也可以发射事件出去
return{
myEle,
myFunc,
sonData
}
},
components:{
'son':son,
}
});
app.mount("#app");
</script>
</html>
692
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
