vue3语法糖script setup

在vue3种setup的写法，可以单独写setup()也可以写到script标签中，当然我们推荐后面这种

他的好处有很多，代码也简洁很多。

1、属性和方法无需return，可直接使用

/*原先*/

?
/*使用script-setup语法糖*/

2、import组件自动注册，无需写到components中

/*原先*/


?
/*用script-setup语法糖后*/


//组件的引入使用已不再需要components注册才能使用了，直接引入就可以在tamplate使用了,这个更改让代码看起来更舒服简介了一些

3、组件使用的变化

props用法defineProps

//原来
props: {
      title: {
        type: String,
        default: '',
        required: true,
      },
    },
//使用script-setup后

import {defineProps} from 'vue'

const props = defineProps({
     title: {
        type: String,
        default: '',
        required: true,
      },
})

emit用法变化defineEmits

//原来
emit:['h-update','h-delete']

//使用script setup后
import { defineEmits } from 'vue'
const emit = defineEmits(['h-update', 'h-delete'])

attrs和slot用法变化

//原来
setup(props,context){
 const { attrs, slots, emit } = context
 // attrs 获取组件传递过来的属性值，
 // slots 组件内的插槽
}

//使用script setup后
import { useContext } from 'vue'
const { slots, attrs } = useContext()

组件对外暴露属性defineExpose

//子组件


//父组件

4、使用自定义指令

全局注册的自定义指令将以符合预期的方式工作，且本地注册的指令可以直接在模板中使用，就像上文所提及的组件一样。

但这里有一个需要注意的限制：必须以 vNameOfDirective 的形式来命名本地自定义指令，以使得它们可以直接在模板中使用

导入指令：