使用Script setup有什么用

简介: 使用Script setup有什么用

使用 <script setup> 时,内部 <script setup> 声明的任何顶级绑定(包括变量、函数声明和导入)都可以在模板中直接使用:

<script setup>
// variable
const msg = 'Hello!'

// functions
function log() {
  console.log(msg)
}
</script>

<template>
  <button @click="log">{{ msg }}</button>
</template>

导入以相同的方式公开。这意味着您可以直接在模板表达式中使用导入的帮助程序函数,而不必通过以下 methods 选项公开它:

<script setup>
import { capitalize } from './helpers'
</script>

<template>
  <div>{{ capitalize('hello') }}</div>
</template>


相关文章
|
6月前
|
设计模式 JavaScript 前端开发
深入理解 Vue3 中的 setup 函数
深入理解 Vue3 中的 setup 函数
|
6月前
vue-3d-model.umd.js报错You may need an appropriate loader to handle this file type怎么办?
vue-3d-model.umd.js报错You may need an appropriate loader to handle this file type怎么办?
Vue3,setup的使用需要搭配return进行使用,Vue3中带setup的script的标签和不带能不能合并到一起,export default不能放到setup里会报错,script
Vue3,setup的使用需要搭配return进行使用,Vue3中带setup的script的标签和不带能不能合并到一起,export default不能放到setup里会报错,script
|
3月前
|
JavaScript 前端开发 API
Vue3之script-setup 语法糖
本文介绍了Vue 3的`<script setup>`语法糖,通过示例代码演示了如何在组件中使用`<script setup>`以及相关的Vue 3 Composition API函数和特性,如响应式引用、生命周期钩子、CSS模块等,并展示了组件间的通信和样式应用。
31 0
Vue3之script-setup 语法糖
|
6月前
|
JavaScript IDE 编译器
Vue <script setup>
Vue <script setup>
73 0
|
JavaScript IDE API
vue3中的单文件组件<script setup>和setup函数区别 详解(一)
vue3中的单文件组件<script setup>和setup函数区别 详解
356 0
|
JavaScript API
Vue3实战06-CompositionAPI+<script setup>好在哪?
Vue3实战06-CompositionAPI+<script setup>好在哪?
36 0
Vue3实战06-CompositionAPI+<script setup>好在哪?
|
前端开发 JavaScript 编译器
vue3中的单文件组件<script setup>和setup函数区别 详解(二)
vue3中的单文件组件<script setup>和setup函数区别 详解
298 0
|
前端开发 API
vue3中的setup
vue3中的setup
Vue3 子组件如何抛出事件($emit 在 setup()、<script setup> 中使用)
Vue3 子组件如何抛出事件($emit 在 setup()、<script setup> 中使用)
360 0