Vue3中setup函数、以及父子组件传值讲解

1.vue3中setup函数的执行时机

setup选项的写法和执行时机,setup函数在beforeCreate函数之前执行,并且是自动执行
在这里插入图片描述
在这里插入图片描述

2.setup函数的两种写法

2.1 普通写法

setup形式定义的变量和方法,后面必须都得return出去!否则渲染不上。而且return出去的变量和方法,用一个对象包住。
在这里插入图片描述

2.2 语法糖写法

在script标签内部,写上setup,这样的话就不用将变量和方法名return出去了。
在这里插入图片描述
小结
在这里插入图片描述

3.vue3父组件给子组件传值。

父组件中传变量要加“:”例如下面的例子中count变量传给SonCom组件
子组件中通过defineProps函数来接父组件传来的变量,并且这个函数不需要引入就可以直接使用
在这里插入图片描述

4.vue3子组件给父组件传值

子组件通过emit给父组件传值
在父组件中绑定自定义函数@get-message,在子组件中通过defineEmits编译器宏生成emit方法,defineEmits函数里面接收一个数组,数组内部,接收子组件得到名字,然后调用emit方法就可以向父组件中传递变量了,emit函数第一个参数为函数名,第二个参数为变量。
在这里插入图片描述

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值