《Vue3 八》<script setup> 语法

<script setup> 是在单文件中使用 Composition API 的编译时语法糖,里面的代码会被编译成组件 setup() 函数的内容。

<script setup> 中的代码在每次组件实例被创建的时候都都会被执行。

定义数据:

<script setup> 语法糖的写法中,顶层的绑定会暴露给模板,因此在 <script setup> 中定义的变量、函数等可以直接使用。不需要像在 setup() 中一样 return 返回。

复制代码
<template>
  <div>{{ message }}</div>
</template>

<!-- 在 <script setup> 中编写 Composition API 就相当于是在 setup() 函数中编写 Composition API -->
<script setup>
import {ref} from 'vue'

// 在 <script setup> 顶层编写的代码都会被暴露给 template 模板,因此在 <script setup> 中定义的变量、函数等不需要像在 setup() 中一样 return 返回,可以直接使用
const message = ref('Hello Vue')
</script>

<style scoped>
</style>   

导入组件:

<script setup> 语法糖的写法中,导入的组件可以直接使用。不需要像在 setup() 中一样手动通过 components 注册。

复制代码
<template>
  <Home></Home>
</template>

<script setup>
// 导入的组件不需要像在 setup() 中一样手动通过 components 注册,可以直接使用
import {Home} from './components/Home.vue'
</script>

<style scoped>
</style>   

接收 props 属性、发出 emit 事件:

<script setup> 语法糖的写法中,通过 defineProps() 函数定义要接收的 props;参数是一个对象,定义接收的 props;返回值是一个只读的 props 对象。

defineProps() 函数默认就在当前作用域中,不需要导入。

复制代码
<template>
  <div>{{ name }} - {{ age }}</div>
</template>

<script setup>
// 通过 defineProps() 函数定义接收的 props
const props = defineProps({
  name: {
    type: String,
    default: 'Lee',
  },
  age: {
    type: Number,
    default: 18,
  }
})
console.log(props)
</script>

<style scoped>
</style>   

<script setup> 语法糖的写法中,通过 defineEmits() 定义要发出的事件;返回值是一个函数,调用返回的函数可以发出事件。

defineEmits() 函数默认就在当前作用域中,不需要导入。

复制代码
<template>
   <button @cick="handleUserInfoChange">修改</button>
 </template>
 
 <script setup>
 // 1. 通过 defineEmits() 定义要发出的事件
 const emits = defineEmits(['userInfoChange'])
 const handleUserInfoChange = () => {
    // 2. 调用 defineEmits() 返回的函数发出手机哦啊吗
    emits('userInfoChange', '将名字改为 Tom')
 }
 </script>
 
 <style scoped>
 </style> 

暴露数据:

<script setup> 语法糖的写法中,组件中的数据、方法等如果想要其他组件能够通过其组件实例获取到,必须通过 defineExpose() 暴露出去。不能像在 setup() 函数中一样直接获取到。

defineExpose() 函数默认就在当前作用域中,不需要导入。

复制代码
// Home.vue
<template>
  <Home ref="homeRef"></Home>
  <button @click="getComponentData">获取子组件中的数据</button>
</template>

<script setup>
import {ref} from 'vue'
import Home from './components/Home.vue';

const homeRef = ref()
const getComponentData = () => {
  console.log(homeRef.value.message)
}
</script>

<style scoped>
</style>   

// Home.vie
<template>
<div>Home</div>
</template>
 
<script setup>

const message = 'Hello Vue'
// 组件中的数据、方法等如果想要其他组件能够通过其组件实例获取,必须通过 defineExpose() 暴露出去
defineExpose({
   message,
})
</script>
 
<style scoped>
</style>   
相关推荐
昔冰_G3 天前
Vue内置组件KeepAlive——缓存组件实例
vue.js·缓存·vue3·vue2·keep-alive·vue组件缓存·vue内置组件
wxr06165 天前
部署Spring Boot项目+mysql并允许前端本地访问的步骤
前端·javascript·vue.js·阿里云·vue3·springboot
知识分享小能手6 天前
微信小程序入门学习教程,从入门到精通,微信小程序开发进阶(7)
前端·javascript·学习·程序人生·微信小程序·小程序·vue3
上单带刀不带妹12 天前
Vue3 全局 API 转移详解
前端·javascript·vue.js·vue3·api
雪山上的小灰熊14 天前
UNIAPP如何自定义全局方法?
javascript·typescript·uni-app·vue·vue3·vite·hooks
路光.17 天前
统一配置管理根据不同域名展现不同信息或相近信息 Vue3类单例模式封装
前端·单例模式·typescript·vue3
Wiktok1 个月前
【pure-admin】pureadmin的登录对接后端
vue3·pureadmin
Wiktok1 个月前
【Wit】pure-admin后台管理系统前端与FastAPI后端联调通信实例
前端·vue3·pureadmin
Wiktok1 个月前
前后端开发Mock作用说明,mock.ts
前端·mock·vue3
知识分享小能手1 个月前
React学习教程,从入门到精通,React AJAX 语法知识点与案例详解(18)
前端·javascript·vue.js·学习·react.js·ajax·vue3