vue3 script setup

详细内容请看官方文件 ，以下内容大多来自此文件。

概括

在 Single File Components: 中引入一种新的脚本类型<script setup>，它将所有顶级绑定暴露给模板。

使用

props

<template>
      // 也可以使用 props.show
      {{ show }}
</template>
<script setup>
import { defineProps } from 'vue';

const props = defineProps({
    show: {
        type: Boolean,
        default: true, // 默认值
    }
})
</script>

生命周期

其它生命钩子请查看官方文档中周期对应的钩子

<script setup>
 import { onMounted } from 'vue';

 onMounted(()=>{
     console.log('is onMounted');
 })

</script>

emits

<template>
    <button @click="trrige"></button>
</template>
<script setup>
import { defineEmits } from 'vue';

const emits = defineEmits(['trrige']);

const trrige = ()=>emits('trrige');
</script>

model (emit + props)

<template>
    <button @click="trriger"> Trriger </button>
    {{ show }}
</template>

<script setup>
import { defineEmits } from 'vue';

const props = defineProps({
    show: {
         type: Boolean,
         default: true,
    }
})

const emits = defineEmits(['update:show']);

const trriger = ()=>emits('update:show', !props.show);

</script>

声明附加选项

该<script setup>语法提供了表达大多数现有 Options API 选项的等效功能的能力，除了少数几个：

• name
• inheritAttrs
• Custom options needed by plugins or libraries
  如果您需要声明这些选项，请使用单独的普通<script>块export default：

<script> 
  export  default  { 
    name : ' CustomName ' , 
    inheritAttrs : false , 
    customOptions : { } 
  } 
</script> 

<script  setup> 
  // script setup logic
</script>