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 祖孙传值

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

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

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

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

<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中的setup语法糖、computed函数、watch函数详解vue中setup语法糖写法实例vue3:setup语法糖使用教程vue3?使用setup语法糖实现分类管理功能一文搞懂Vue3.2中setup语法糖使用强烈推荐!Vue3.2中的setup语法糖