script setup特性

defineProps、defineEmits

这两API在script setup中不需要手动引入

• .eslintrc.js文件中【globals】下配置【defineProps: true, defineEmits: true】

<template>
  <span>{{ props.name }}</span>
  <!-- 可省略【props.】 -->
  <span>{{ name }}</span>
  <span @click="update">向上触发事件</span>
</template>

<script setup>
  // import { defineProps } from 'vue' // 不需要手动引入
  // 声明props
  const props = defineProps({
    name: {
      type: String,
      default: ''
    }
  })

  // defineEmit声明事件
  const emit = defineEmits(['update'])
  
  const handleClick = () => {
    // 触发事件
    emit('update', 'test')
  }
</script>

defineExpose

在标准组件写法里，子组件的数据都是默认暴露给父组件

script-setup 模式下，所有数据只是默认 return 给 template 使用，不会暴露到组件外，所以父组件是无法直接通过挂载 ref 变量获取子组件的数据

该API在script setup中不需要手动引入

• .eslintrc.js文件中【globals】下配置【defineExpose: true】

<template>
  <span>{{state.name}}</span>
</template>

<script setup>
  import { reactive, toRefs } from 'vue'
  // defineExpose 无需引入
  import { reactive, toRefs } from 'vue'
  const state = reactive({
    name: 'chaos'
  }) 
  // 将方法、变量暴露给父组件使用，父组件才可通过ref API拿到子组件暴露的数据
  defineExpose({
    // 声明方法
    changeName () {
      state.name = 'chaoszhu'
    }
  })
</script>

其他

自动注册引入的组件，在template直接引用

自动return(暴露给template)定义的属性或方法

可以再添加一个普通script标签，定义组件name、暴露options等