[Vue3.0]关于 script setup 语法糖的用法

script setup - 简介

<script setup> 的介绍:

setup( 这个 组合式API

在 setup( 函数中返回的对象会暴露给模板和组件实例。其它的选项也可以通过组件实例来获取 setup( 暴露的属性

<script> 标签后添加 setup 时，你在声明/初始化 响应式 变量或者函数时，每一个都需要在 setup( 的return中进行返回，像这样：

<script>
import { ref } from 'vue'

export default {
  setup( {
    const count = ref(0

    // 返回值会暴露给模板和其他的选项式 API 钩子
    return {
      count
    }
  }
}
</script>

当你选择<script setup>语法糖时，即可免去这一恶心的操作

<template>
    <!--  组件自动注册  -->
    <Child />
    <!-- 变量自动注册  -->
    {{count}}
</template>

<script setup>
  // 注册的组件、变量、函数、方法示例直接暴露给模板
  import Child from './Child.vue'
  // 直接定义 count 无需返回
  const count = ref(0
</script>

2.组件核心 API 直接可以使用
类似 props 、 emits 、 slots 和 attrs 等

props : 通过defineProps指定当前 props 类型，获得上下文的props对象，一般用来定义组件的属性

<script setup>
  import { defineProps } from 'vue'

  const props = defineProps({
    title: String,
  }
</script>

父子组件传值的时候用到的  emits
<script setup>
  import { defineEmits } from 'vue'

  const emit = defineEmits(['change', 'delete']
</script>

小结
在以往的写法中，包括在vue2.0，定义数据和方法，都需要在结尾 return 出去，在能在dom模板中使用。而vue3.0新增的<script setup> 写法中，定义的属性和方法直接暴露给模板和示例组件而省去返回的环节，可以直接使用。
-- 希望本文可以帮助到你 2023年1月12日 --
            
声明：本文由用户投稿上传，本站不保证内容的真实与正确性，并且不承担相关法律责任，如有侵权请提供版权资料并联系删除！
            

                编程笔记
                »
                [Vue3.0]关于 script setup 语法糖的用法
            
            

                
                    赞同 (30)
                
                or
                
                    
                    分享 (0)