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

随心笔谈5个月前发布 admin
177 00
🌐 经济型:买域名、轻量云服务器、用途:游戏 网站等 《腾讯云》特点:特价机便宜 适合初学者用 点我优惠购买
🚀 拓展型:买域名、轻量云服务器、用途:游戏 网站等 《阿里云》特点:中档服务器便宜 域名备案事多 点我优惠购买
🛡️ 稳定型:买域名、轻量云服务器、用途:游戏 网站等 《西部数码》 特点:比上两家略贵但是稳定性超好事也少 点我优惠购买

文章摘要

这篇文章介绍了Vue3.2中新增的`setup`语法糖及其核心功能,详细讲解了如何利用语法糖简化组件开发。主要内容包括: 1. **语法糖基础** - `setup`语法糖无需`return`声明即可直接使用,简化了Vue脚本的写法。 - `setup`支持`await`,自动变为`async setup`,提升代码的 async 执行能力。 2. **核心功能详解** - **ref**:提供组件实例引用,支持数据持久化。 - **data**:管理组件属性数据,支持计算属性。 - **method**:绑定方法到组件实例,实现属性绑定。 - **watchEffect**:对指定属性进行回调监听,更新相应属性。 - **watch**:关注属性变化,执行回调操作。 - **computed**:计算属性,支持两种写法(简写和完整写法)。 - **props和emit**:使用`defineProps`声明组件接口,通过`emit`实现父组件与子组件的数据交互。 - **store**:管理应用状态,支持数据持久化和分发动作。 - **await和async**:结合`setup`语法糖,提升代码 async 执行效率。 - **provide和inject**:通过`provide`管理组件状态,`inject`将父组件状态注入子组件。 3. **示例代码** 文章提供多个代码示例,展示了如何利用`setup`语法糖实现实际功能,包括组件初始化、属性监听、数据计算、组件交互等。 总结来说,这篇文章通过`setup`语法糖,介绍了Vue3.2中新增的核心功能,帮助开发者更高效地构建组件,提升了代码的可读性和维护性。



目录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 代码如下(示例):

<template>
</template>
<script setup>
</script>
<style scoped lang=”less”>
</style>

由于  setup  不需写  return ,所以直接声明数据即可 代码如下(示例):

<script setup>
import {
ref,
reactive,
toRefs,
} from ‘vue’
const data=reactive({
patternVisible: false,
debugVisible: false,
aboutExeVisible: false,
})
const content=ref(‘content’)
//使用toRefs解构
const { patternVisible, debugVisible, aboutExeVisible }=toRefs(data)
</script>

代码如下(示例):

<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>

代码如下(示例):

<script setup>
import {
ref,
watchEffect,
} from ‘vue’
let sum=ref(0)
watchEffect(()=>{
const x1=sum.value
console.log(‘watchEffect所指定的回调执行了’)
})
</script>

代码如下(示例):

<script setup>
import {
reactive,
watch,
} from ‘vue’
//数据
let sum=ref(0)
let msg=ref(‘你好啊’)
let person=reactive({
name:’张三’,
age:18,
job:{
j1:{
salary:20
}
}
})
// 两种监听格式
watch([sum,msg],(newValue,oldValue)=>{
console.log(‘sum或msg变了’,newValue,oldValue)
},{immediate:true})
watch(()=>person.job,(newValue,oldValue)=>{
console.log(‘person的job变化了’,newValue,oldValue)
},{deep:true})
</script>

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

<script setup>
import {
reactive,
computed,
} from ‘vue’
//数据
let person=reactive({
firstName:’小’,
lastName:’叮当’
})
// 计算属性简写
person.fullName=computed(()=>{
return person.firstName + ‘-‘ + person.lastName
})
// 完整写法
person.fullName=computed({
get(){
return person.firstName + ‘-‘ + person.lastName
},
set(value){
const nameArr=value.split(‘-‘)
person.firstName=nameArr[0]
person.lastName=nameArr[1]
}
})
</script>

子组件代码如下(示例):

<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>

代码如下(示例):

<script setup>
import { useRoute, useRouter } from ‘vue-router’
// 声明
const route=useRoute()
const router=useRouter()
// 获取query
console.log(route.query)
// 获取params
console.log(route.params)
// 路由跳转
router.push({
path: `/index`
})
</script>

代码如下(示例):

<script setup>
import { useStore } from ‘vuex’
import { num } from ‘https://www.jb51.net/store/index’
const store=useStore(num)
// 获取Vuex的state
console.log(store.state.number)
// 获取Vuex的getters
console.log(store.state.getNumber)
// 提交mutations
store.commit(‘fnName’)
// 分发actions的方法
store.dispatch(‘fnName’)
</script>

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

代码如下(示例):

<script setup>
import api from ‘https://www.jb51.net/api/Api’
const data=await Api.getData()
console.log(data)
</script>

父组件代码如下(示例)

<template>
<AdoutExe />
</template>

<script setup>
import { ref,provide } from ‘vue’
import AdoutExe from ‘@/components/AdoutExeCom’

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语法糖

© 版权声明

相关文章