vue子组件向父组件传值的三种方式,vue父组件怎么给子组件传值
这篇文章主要介绍了vue3.0子组件如何修改父组件传递过来的值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
子组件修改父组件传递过来的值使用托雷夫斯进行解决子组件向父组件传值发射的使用注意事项子组件的写法父组件使用
子组件修改父组件传递过来的值
某视频剪辑软件的子组件不是不能直接更改父组件的值，需要将小道具的值给到子组件，后再修改，
否则：意外突变的"道具"道具。
vue3提供了一个解决：撕fs:https://v3。cn。vue js。org/API/refs-API。html # tore fs
托雷夫斯非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行解构/展开
使用
const { foo，bar }=电抗({
foo: 1，
酒吧：2
})
//核心解决，使用反应的接收不会响应时更新，需要使用托雷夫斯
const props=defineProps({
drawerStatus: {
类型：布尔型
}
})
const {出票人状态}=tore fs(道具)
使用toRefs进行解决
模板
El-drawer v-model=抽屉状态 title=设置部门助理：before-close=handleClose
div class=抽屉-页脚
埃尔按钮取消/el-button
El-button type= primary @ click= on submit 确定/el-button
/div
/El-抽屉
/模板
脚本设置
从“vue”导入{反应性，toRefs}
const props=defineProps({
drawerStatus: {
类型：布尔型
}
})
const emisses=define emisses([ upDrawerStatus ])
const {出票人状态}=tore fs(道具)
console.log(33333333，drawerStatus)
//新增角色数据
const formData=reactive({
})
const onSubmit=()={
手柄关闭()
}
const handleClose=()={
console.log(关闭抽屉)
发出( upDrawerStatus ，false)
}
/脚本
子组件向父组件传值emit的使用注意事项
子组件的写法
需要从设置函数中引出{emit}
模板
div id=center v-if=isShow
氘插槽我的型号/插槽/h2
El-button type= primary @ click= BTN关闭传递事件/el-button
El-button type= primary @ click= BTN父母子组件触发父组件的方法/el-button
/div
/模板
脚本语言
导入{
定义组件，获取当前实例
}来自vue ；
导出默认定义组件({
道具：{
isShow:{
类型：布尔型，
默认值：真
}
},
发出：{
“我的-结束”:空，
},
设置（道具，{emit}) {
const { proxy }:any=getCurrentInstance()
const btnclose=()={
发出(我的关闭,传递的数据)
}
const btnparents=()={
console.log(代理);
代理. parent.addNum()
}
返回{
btnclose，
代理人，
按钮父母
};
},
});
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围
h3 {
边距：40px 0 0
}
ul {
列表样式类型：无；
填充：0;
}
李{
显示：内嵌-块；
边距：0 10px
}
一个{
颜色：# 42b983
}
/风格
父组件使用
模板
hello world @ my-close= myModealHide :show= myModalShow 是solt/hello world吗
El-button @ click= my modal block my modal 2/El-button
El-button type= primary @ click= to delit 用户详情/el-button
/模板
脚本语言
从“vue”导入{ defineComponent，computed，onMounted，watch，ref，getCurrentInstance，reactive，nextTick，toRefs}
导入{
使用商店，
地图状态，
}来自" vuex "
从" vue路由器"导入{用户路由，用户路由，用户链接，用户链接选项}
从" vue-i18n "导入{ usei 18n }；
从" @/utils/TypeState "导入{数据}
从" @/components/HelloWorld.vue "导入编译
导出默认定义组件({
组件：{
编译
},
设置（道具、上下文){
console.log(上下文，上下文);
const store=useStore()
const { proxy }:any=getCurrentInstance()
const Number=ref string Number(存储。状态。app。年龄)
const Route=useRoute()
const RouteLink=useLink
const { t }=usei 18n()；
const languageD=()={
代理18n.locale=data.seleLanguage
}
控制台。日志(存储。状态。app。allmenulist数组的实例of
console.log(代理);
//监听指定基础类型数据
const addNum=()={
//名称。值=数量(名称。值)1
名称。值
}
手表（名称，(现在，以前)={
console.log(现在，以前，计数)
})
//监听反应的创建的响应式变量，可以直接监听对象，必须使用内联函数
watch(()=data.tableData，(now，prev)={
console.log(现在，以前，表数据)
})
const myModalShow=ref(false)
const myModealHide=(val:any)={
myModalShow.value=false
控制台。日志(val)；
}
const myModalBlock=()={
myModalShow.value=true
}
const toDelit=():void={
代理router.push(/userAdminDetils )
}
返回{
年龄，
号，
代理人，
店，
姓名，
addNum，
.toRefs(数据),
t，
语言化，
myModealHide，
myModalBlock，
myModalShow，
托德利特
}
},
已创建(){
console.log(这个.路线)；
控制台。日志(这个。商店。状态。app。年龄)；
//console.log(这个. store美元)；//报错
}
})
/脚本
风格
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。