Vue3 setup语法糖解析

setup说明
Vue3.0 在template中想要使用setup中的变量和函数必须return暴露变量出来，template中才可以使用；
缺陷就是会导致在页面上变量会出现很多次，使页面变得不整洁。
很不友好，vue3.2只需要在script标签中添加setup属性，可以帮助我们解决这个问题。
组件只需引入不用注册，属性和方法也不用返回，也不用写setup函数，也不用写export default ，
甚至是自定义指令也可以在我们的template中自动获得。

代码示例

1. 使用setup作为script 的属性

2. 使用setup作为函数

组件不需要再注册

// 父组件

在 script setup 中，
引入的组件可以直接使用无需再通过components进行注册
并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。
当我们的页面上需要使用很多组件时，它的功能一下就体现出来了。

新增 defineProps

刚刚我一直在强调,不需要使用setup函数，机智的小伙伴会说:
那么子组件怎么接受父组件传递过来的值呢?
props，emit怎么获取呢?
别担心,新的api出现了,我们的主角 defineProps

defineProps 的使用

父组件传递参数

子组件接受参数

子组件怎么向父组件抛出事件？defineEmits的到来！

子组件使用

父组件

如何获取子组件中的属性值

子组件

父组件

本文章借鉴作者：BingJS
地址：https://www.jianshu.com/p/143ddd1d584d
来源：

生活就是不断的积累 奥力给~