《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>   
相关推荐
ldj202011 天前
vue3整合element-plus
vue3
夜空孤狼啸15 天前
前端常用拖拽组件库(vue3、react、vue2)
前端·javascript·react.js·typescript·前端框架·vue3
sunshine_程序媛16 天前
vue3中的watch和watchEffect区别以及demo示例
前端·javascript·vue.js·vue3
meng半颗糖17 天前
vue3 双容器自动扩展布局 根据 内容的多少 动态定义宽度
前端·javascript·css·vue.js·elementui·vue3
3D虚拟工厂17 天前
3D虚拟工厂
3d·vue3·blender·数字孪生·three.js
霸王蟹21 天前
前端项目Excel数据导出同时出现中英文表头错乱情况解决方案。
笔记·学习·typescript·excel·vue3·react·vite
佚名猫25 天前
vue3+vite+pnpm项目 使用monaco-editor常见问题
前端·vue3·vite·monacoeditor
技术闲聊DD1 个月前
Vue3学习(4)- computed的使用
vue3·computed
蓝胖子的多啦A梦1 个月前
Vue3 (数组push数据报错) 解决Cannot read property ‘push‘ of null报错问题
前端·vue3·push·数组数据
有梦想的攻城狮1 个月前
从0开始学vue:vue3和vue2的关系
前端·javascript·vue.js·vue3·vue2