简介

• 
  注：因为setup语法糖是vue3.2正式确定下来的议案，所以vue3.2的版本是真正适合setup语法糖的版本。

  属性和方法无需返回，直接使用

  以前使用响应式数据是：

   1 
   4 
   5 

  现在使用 setup 语法糖，不需要return返回 和 setup函数，只需要全部定义在



  注意：在 setup语法糖 中你应该避免使用 this，因为它不会找到组件实例。setup 的调用发生在 data property、computed property 或 methods 被解析之前，所以它们无法>在 setup 中被获取。

  reactive, computed,methods 也一样可以使用

   1 
   7 
   8 

  组件自动注册

  在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了。

  1 
  4 
  5 

  组件数据传递(props和emits)

  通过defineProps指定当前 props 类型，获得上下文的props对象。

  使用defineEmit定义当前组件含有的事件，并通过返回的上下文去执行 emit。

  defineProps 用来接收父组件传来的 props ; defineEmits 用来声明触发的事件。

  子组件 Child.vue

   1 
   4 
   5 

  父组件 Home.vue

   1 
   4 
   5 

  获取 slots 和 attrs

  可以通过useContext从上下文中获取 slots 和 attrs。不过提案在正式通过后，废除了这个语法，被拆分成了useAttrs和useSlots。

  useAttrs：用来获取 attrs 数据，但是这和 vue2 不同，里面包含了 class、属性、方法。

  
  
       const attrs = useAttrs();
  
   7 
   8 // 新
   9 

   对外暴露属性(defineExpose)

  传统的写法，我们可以在父组件中，通过 ref 实例的方式去访问子组件的内容，但在 script setup 中，该方法就不能用了，setup 相当于是一个闭包，除了内部的 template模板，谁都不能访问内部的数据和方法。

  父组件 Home.vue

   1 
   4 
   5 

  参考网站：https://www.cnblogs.com/bingcola/p/15507847.html