Vue3.2中setup语法糖的使用教程分享（vue给slot传值）学会了吗

🌐 经济型：买域名、轻量云服务器、用途：游戏网站等《腾讯云》特点：特价机便宜适合初学者用点我优惠购买

🚀 拓展型：买域名、轻量云服务器、用途：游戏网站等《阿里云》特点：中档服务器便宜域名备案事多点我优惠购买

🛡️ 稳定型：买域名、轻量云服务器、用途：游戏网站等《西部数码》特点：比上两家略贵但是稳定性超好事也少点我优惠购买

目录1、如何使用setup语法糖2、data数据的使用3、method方法的使用4、watchEffect的使用5、watch的使用6、computed计算属性的使用7 、props父子传值的使用8 、emit子父传值的使用9、获取子组件ref变量和defineExpose暴露10、路由useRoute和us eRouter的使用11、store仓库的使用12、await的支持13、provide 和 inject 祖孙传值

提示：vue3.2 版本开始才能使用语法糖！

在 Vue3.0 中变量必须 return 出来， template 中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return ， template 便可直接使用，非常的香啊！

提示：以下是本篇文章正文内容，下面案例可供参考

只需在 script 标签上写上 setup 代码如下（示例）：

由于 setup 不需写 return ，所以直接声明数据即可代码如下（示例）：

代码如下（示例）：

<template >
<button @click=”onClickHelp”>系统帮助</button>
</template>
<script setup>
import {reactive} from ‘vue’
const data=reactive({
aboutExeVisible: false,
})
// 点击帮助
const onClickHelp=()=> {
console.log(`系统帮助`)
data.aboutExeVisible=true
}
</script>

代码如下（示例）：

代码如下（示例）：

computed 计算属性有两种写法(简写和考虑读写的完整写法) 代码如下（示例）：

子组件代码如下（示例）：

<template>
<span>{{props.name}}</span>
</template>
<script setup>
import { defineProps } from ‘vue’
// 声明props
const props=defineProps({
name: {
type: String,
default: ’11’
}
})
// 或者
//const props=defineProps([‘name’])
</script>

父组件代码如下（示例）：

<template>
<child :name=’name’/>
</template>
<script setup>
import {ref} from ‘vue’
// 引入子组件
import child from ‘https://www.jb51.net/javascript/child.vue’
let name=ref(‘小叮当’)
</script>

子组件代码如下（示例）：

<template>
<a-button @click=”isOk”>
确定
</a-button>
</template>
<script setup>
import { defineEmits } from ‘vue’;
// emit
const emit=defineEmits([‘aboutExeVisible’])

// 点击确定按钮
const isOk=()=> {
emit(‘aboutExeVisible’);
}
</script>

父组件代码如下（示例）：

<template>
<AdoutExe @aboutExeVisible=”aboutExeHandleCancel” />
</template>
<script setup>
import {reactive} from ‘vue’
// 导入子组件
import AdoutExe from ‘https://www.jb51.net/components/AdoutExeCom’
const data=reactive({
aboutExeVisible: false,
})
// content组件ref
// 关于系统隐藏
const aboutExeHandleCancel=()=> {
data.aboutExeVisible=false
}
</script>

即 vue2 中的获取子组件的 ref ，直接在父组件中控制子组件方法和变量的方法

子组件代码如下（示例）：

<template>
<p>{{data }}</p>
</template>
<script setup>
import {
reactive,
toRefs
} from ‘vue’

const data=reactive({
modelVisible: false,
historyVisible: false,
reportVisible: false,
})
defineExpose({
…toRefs(data),
})
</script>

父组件代码如下（示例）：

<template>
<button @click=”onClickSetUp”>点击</button>
<Content ref=”content” />
</template>
<script setup>
import {ref} from ‘vue’
// content组件ref
const content=ref(‘content’)
// 点击设置
const onClickSetUp=({ key })=> {
content.value.modelVisible=true
}
</script>
<style scoped lang=”less”>
</style>

代码如下（示例）：

代码如下（示例）：

setup 语法糖中可直接使用 await ，不需要写 async ， setup 会自动变成 async setup

代码如下（示例）：

父组件代码如下（示例）

let name=ref(‘Jerry’)
// 使用provide
provide(‘provideState’, {
name,
changeName: ()=> {
name.value=’小叮当’
}
})
</script>
子组件代码如下（示例）：
<script setup>
import { inject } from ‘vue’
const provideState=inject(‘provideState’)

provideState.changeName()
</script>

以上就是Vue3.2中setup语法糖的使用教程分享的详细内容，更多关于Vue setup语法糖的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:Vue3中的setup语法糖、computed函数、watch函数详解vue中setup语法糖写法实例vue3:setup语法糖使用教程vue3?使用setup语法糖实现分类管理功能一文搞懂Vue3.2中setup语法糖使用强烈推荐!Vue3.2中的setup语法糖