中学院新校区建设专题网站,网站建设属于软件开发,广东外贸网站推广公司,网站用哪个软件做setup 函数中有两个主要的参数#xff1a;props、context 。 props 用于接收父组件传递过来的数据#xff0c;父传子。 context 指的是 setup 的上下文#xff0c;它有三个属性#xff1a;attrs、slots、emit 。 attrs 用于#xff1a;当父组件传递过来的数据#xff…setup 函数中有两个主要的参数props、context 。 props 用于接收父组件传递过来的数据父传子。 context 指的是 setup 的上下文它有三个属性attrs、slots、emit 。 attrs 用于当父组件传递过来的数据没有被 props 接收时数据就会存放在 attrs 属性中。 slots 用于接收父组件传递过来的插槽内容相当于 vue2 中的 this.$slots 。 emit 用于创建自定义事件函数子传父。相当于 vue2 中的 this.$emit 。 setup 函数中的 props 参数【父传子】 父组件 templateh1我是父组件/h1hr /!-- 3.使用子组件并通过自定义属性传递数据 --Child :nameinfo.name sex男 :ageinfo.age/Child /templatescript import { reactive } from vue; // 1.引入子组件 import Child from ../components/Child.vue; export default {name: Parent,// 2.注册子组件components: { Child },setup() {let info reactive({name: 张三,age: 18})// 返回数据return { info }} } /script 子组件 templateh1我是子组件/h1p姓名{{ props.name }}/pp性别{{ props.sex }}/pp年龄{{ props.age }}/p /templatescript export default {name: Child,// 接收数据未接收的数据不会在 props 参数中显示props: [name, sex],setup(props, context) {console.log(props);// 返回数据return { props }} } /script 效果 props 参数的几种接收方式 无限制接收 props: [name, sex, age] 限制数据类型接收 props: {name: String,age: Number,sex: String } 限制数据类型、默认值、是否必填接收 props: {name: {type: String,required: true // 是否必填},age: {type: Number,required: true // 是否必填},sex: {type: String,default: 保密 // 设置默认值} } context 参数中的 attrs 属性【子传父】 父组件 templateh1我是子组件/h1p姓名{{ props.name }}/pp性别{{ props.sex }}/pp年龄{{ props.age }}/p /templatescript export default {name: Child,// 假设父组件传递了 name、age、sex 三个数据props 只接收 name 数据props: [name],setup(props, context) {// 那么 props 未接收的数据会在 attrs 属性中显示console.log(context.attrs);// 返回数据return {props}} } /script 效果 context 参数中的 slots 属性【默认插槽】  父组件 templateh1我是父组件/h1hr /Childp姓名{{ info.name }}/pp年龄{{ info.age }}/p/Child /templatescript import { reactive } from vue; import Child from ../components/Child.vue; export default {name: Parent,components: { Child },setup() {let info reactive({name: 张三,age: 18})// 返回数据return { info }} } /script 子组件 templateh1我是子组件/h1slot默认值/slot /templatescript export default {name: Child,setup(props, context) {// 父组件传递过来的插槽内容会存放在 slots 属性中console.log(context.slots);} } /script 效果 context 参数中的 emit 属性【子传父】 父组件 templateh1我是父组件/h1hr /!-- 使用自定义事件 --Child myEventmyInfo/Child /templatescript import Child from ../components/Child.vue; export default {name: Parent,components: { Child },setup() {// 接收父组件传递的数据let myInfo (value) {alert(我是父组件我收到数据了值为${value});}// 返回数据return { myInfo }} } /script 子组件 templateh1我是子组件/h1button clicktest往父组件中传递数据/button /templatescript export default {name: Child,// 声明自定义事件emits: [myEvent],setup(props, context) {let test () {// 调用自定义事件语法为context.emit(自定义事件, 值);context.emit(myEvent, 666);}// 返回数据return { test }} } /script 效果 原创作者吴小糖 创作时间2023.10.26