哪里的网站建设好,做公司自主网站,wordpress主题 翠竹林,合肥优秀网站建设前言
在Vue3中#xff0c;父子组件之间的数据传递是一个常见的需求。本文将介绍如何在Vue3中传递对象#xff0c;并且在子组件中访问和修改父组件对象中的属性值#xff0c;以及子组件如何调用父组件中的方法。 在 Vue 3 中#xff0c;父子组件之间传值有以下作用#xf…前言
在Vue3中父子组件之间的数据传递是一个常见的需求。本文将介绍如何在Vue3中传递对象并且在子组件中访问和修改父组件对象中的属性值以及子组件如何调用父组件中的方法。 在 Vue 3 中父子组件之间传值有以下作用
1. 组件通信父组件可以通过向子组件传递数据来实现与子组件的通信。这样父组件就能将数据传递给子组件并且子组件可以根据接收到的数据进行渲染或执行相应的操作。
2. 数据共享通过父子组件传值可以在多个组件之间共享数据。当多个子组件需要访问同一个数据时可以将数据定义在父组件中然后通过 props 将数据传递给子组件从而实现数据共享。
3. 动态配置父组件可以通过向子组件传递不同的参数或配置来动态控制子组件的行为。例如父组件可以根据用户的操作或业务需求向子组件传递不同的 props 值以便子组件根据不同的配置进行展示或处理。
4. 构建组件库通过父子组件传值可以构建可复用的组件库。父组件可以定义一些可配置的选项或属性并将它们作为 props 传递给子组件。这样其他开发者在使用该组件库时可以根据自己的需求和场景通过修改 props 值来自定义组件的行为和外观。
1. 在setup()语法糖中使用 props 和 emits
setup有props和cxt两个参数可以在setup语法糖内部使用props 和 emits
父组件代码示例
script setup langts
import {ref} from vueconst count ref(10)
const userlist ref([{name:xujingliang,password:123456},{name:xujingliang,password:123456},{name:xujingliang,password:123456}
])function edit(val):void{userlist.value[val].name liudehua
}function del():void{alert(delete)
}
/scripttemplatedefinePropsTest :userlistuserlist :countcount editedit deletedel/definePropsTest
/templatestyle scoped/style子组件代码示例
script langts
import {setup,emit} from vue;export default{props:{count:Number,userlist:Array},emits:[edit,delete],setup(props,cxt){// 语法糖内部使用function edit(index):void{cxt.emit(edit,index)}function del():void{cxt.emit(delete);}return {props,edit,del}},created(){console.log(this.count);console.log(this.userlist)this.$emit(edit,1);}}
/script
template
!-- 在模版中访问 --
p总共{{ count }}条数据/ptable :border1trth姓名/thth密码/thth操作/th/trtr v-for(item,index) in userlist :keyindextd{{ item.name }}/tdtd{{ item.password }}/tdtdbutton clickedit(index)编辑/buttonbutton clickdel()删除/button/td/tr/table/template 2. script setup语法中使用 props和emits
defineProps返回的props对象是一个proxy对象所有特性和reactive基本相同只不过由defineProps定义出的props对象的值是只读的还有在模板上可以单独属性直接使用
defineProps父组件传值给子组件实现子组件访问父组件传入的值
语法
let props defineProps({count:Number, // 也可以直接简写 只填类型userlist:{type:Array, // 规定数据的类型required:true, // 是否是必填选项default:[] // 如果父组件没有传值情况下的默认值}
})
父组件
script setup langts
import {ref} from vueimport definePropsTest from ./components/definePropsTest.vueconst count ref(10)
const userlist ref([{name:xujingliang,password:123456},{name:xujingliang,password:123456},{name:xujingliang,password:123456}
])/scripttemplatedefinePropsTest :userlistuserlist :countcount/definePropsTest
/templatestyle scoped/style子组件
script setup langtslet props defineProps({count:Number, // 也可以直接简写 只填类型userlist:{type:Array, // 规定数据的类型required:true, // 是否是必填选项default:[] // 如果父组件没有传值情况下的默认值}})// 在代码中访问console.log(props.count);console.log(props.userlist);/script
template
!-- 在模版中访问 --p总共{{ props.count }}条数据/ptable :border1trth姓名/thth密码/th/trtr v-for(item,index) in props.userlist :keyindextd{{ item.name }}/tdtd{{ item.password }}/td/tr/table
/template
子组件如何修改父组件传入的值
vue是单项数据流引用Vue的官网的话父系 prop 的更新会向下流动到子组件中但是反过来则不行。这样会防止从子组件意外改变父及组件的状态从而导致你的应用的数据流向难以理解。
在父子组件通讯的时候子组件都禁止直接修改父级传过来的prop 直接修改在控制台会报错。但VUE的两个语法糖能做到这一点
这里我们来讲defineEmits的使用子组件调用父组件中的方法 父组件代码示例
script setup langts
import {ref} from vueconst count ref(10)
const userlist ref([{name:xujingliang,password:123456},{name:xujingliang,password:123456},{name:xujingliang,password:123456}
])function edit(val):void{userlist.value[val].name liudehua
}function del():void{alert(delete)
}
/scripttemplatedefinePropsTest :userlistuserlist :countcount editedit deletedel/definePropsTest
/templatestyle scoped/style子组件代码示例
script setup langts
let props defineProps({count:Number, // 也可以直接简写 只填类型userlist:{type:Array, // 规定数据的类型required:true, // 是否是必填选项default:[] // 如果父组件没有传值情况下的默认值}
})const emit defineEmits([edit, delete]);// 在代码中访问console.log(props.count);console.log(props.userlist);/script
template
!-- 在模版中访问 --p总共{{ props.count }}条数据/ptable :border1trth姓名/thth密码/thth操作/th/trtr v-for(item,index) in props.userlist :keyindextd{{ item.name }}/tdtd{{ item.password }}/tdtdbutton clickemit(edit,index)编辑/buttonbutton clickemit(delete,item.name)删除/button/td/tr/table
/template 在Vue3中如果想修改父组件传入的值只能通过defineEmits让子组件调用父组件中的方法来修改父组件中的值同时子组件中的值也会发生响应式变化
