Vue3 ＜script setup＞是什么？作用？

原创已于 2023-11-09 17:04:35 修改 · 4.1k 阅读

23 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-11-07 23:21:49 首次发布

每日专栏同时被 2 个专栏收录

226 篇文章

订阅专栏

Vue3.x

62 篇文章

订阅专栏

文章介绍了Vue3的新特性<scriptsetup>，它简化了组合式API，无需return即可在模板中使用属性和方法，自动注册组件，以及如何使用defineProps、defineEmits和useAttrs。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

结论先行：

① 在 setup 中声明的属性和方法无需 return，就可以直接在模板使用；

② 引入组件的时候，会自动注册，无需通过 components 手动注册；

④ 而且，它默认不会对外暴露任何属性和方法，如果要暴露的话就要使用 defineExpose

④ 可以使用 defineProps 接收父组件传递的值，defineEmits 定义自定义事件

⑤ useAttrs 获取属性，useSlots 获取插槽

具体解析：

1、<script setup> 是什么？

在单文件组件 SFC 中使用 Composition 组合式 API 的 " 编译时 " 语法糖。

基本语法：需要在 <script> 代码块加上 setup 属性

<script setup>
	console.log('你好，script setup')
</script>

普通的 <script> 只会在组件第一次被引入的时候执行一次
而 <script setup> 中的代码会在每次组件实例被创建的时候执行

2、<script setup> 语法糖的特点：

① 不需要再手动写 setup(){ }

因为在 setup 函数中，所有 ES 模块导出都被认为是暴露给上下文的值。

<script setup>
	console.log('你好，script setup')
</script>

② 属性和方法无需返回，可以直接使用。

不需要写 return，直接声明数据就可以在模板中使用了。因为已经在 <script setup> 标签中，实现了 “顶层的绑定”。

解决了之前需要将声明的变量、函数以及 import 引入的内容，通过 return 向外暴露才能模板中使用的问题。

<template>
  <p>{{ msg }}</p>
</template>

<script setup>
    const msg = ref('hello')
</script>

③ 引入组件的时候，会自动注册，无需通过 components 手动注册。

<template>
  <com>{{ msg }}</com>
</template>

<script setup>
    import com from './com.vue'
</script>

④ 使用 defineProps 接收父组件传递的值。

defineProps 是 Vue3 的一个宏函数，使用时可不导入，参数与 Vue2 的 props 选项相同。

defineProps 返回的 props 对象，是一个响应式 proxy 对象，特性与 reactive 基本相同。但是，定义的 props 对象的值是只读的，而且可以在模板中直接使用属性。

<template>
  <p>{{ msg }}</p>
</template>

<script setup>
  const props = defineProps({
	  msg: String,
	  name: {
		  type: String,
		  default: '默认值'
	  }
  })
  console.log(props.name)
  props.name = 'haha' // 不能修改，声明的props的值是只读的
</script>

⑤ useAttrs 获取属性，useSlots 获取插槽，defineEmits 获取自定义事件，defineExpose 对外暴露

useAttrs：接收父组件传递的属性和事件；

在组件中可以直接使用这些属性和事件，无需在 props 和 emits 中声明。在模板中就可以直接使用它们。

与 defineProps 相比，useAttrs 的优先级较低。

useAttrs 能够接收到所有属性，但不能够对接收到的属性进行类型校验和默认值设置。

<template>
  <div>
    <p>{{ title }}</p>
    <button @click="onClick">点击</button>
  </div>
</template>

<script setup>
import { useAttrs } from 'vue'
const { title, onClick } = useAttrs()
</script>

defineEmits：父组件向子组件传递函数；

defineExpose：可以将子组件中的属性和方法暴露给父组件

默认不会对外暴露任何属性和方法

父组件：

<template>
  <p>父组件</p>
  <child ref="childRef" :value="parentValue" @func="func"/>
</template>

<script setup>
import child from "./child";

const parentValue = ref('我是爸爸');
const func = (params) => {
  parentValue.value = params
};

const childRef = ref(null);
onMounted(()=>{
    // 调用子组件中的参数和函数
    console.log(childRef.value.a);
    childRef.value.childFn();
});
</script>

<script>
export default {
  name: "parent"
}
</script>

子组件：

<template>
  <p>子组件</p>
  <p>{{ value }}</p>
  <button @click="emit('func', '哈哈哈')">点击</button>
</template>

<script setup>
import { defineProps, defineEmits, defineExpose } from 'vue'

// 接收父级传过来的参数
const props = defineProps(["value"]);
// 接收父级传过来的方法
const emit = defineEmits(["func"]);

const childValue = '我是儿子';
const childFn = () => {
  console.log("我是子组件中的方法");
}

// 将参数childValue和函数childFn暴露给父组件
defineExpose({
  childValue,
  childFn
});
</script>

<script>
export default {
  name: "child"
}
</script>