首页 > 网络编程 > JavaScript > Vue3.2中setup语法糖的使用教程分享

Vue3.2中setup语法糖的使用教程分享

福牛 5月 16, 2023 22 0

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

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

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

1、如何使用setup语法糖

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

  1. <template>
  2. </template>
  3. <script setup>
  4. </script>
  5. <style scoped lang=“less”>
  6. </style>

2、data数据的使用

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

  1. <script setup>
  2.      import {
  3.          ref,
  4. reactive,
  5.          toRefs,
  6.      } from ‘vue’
  7.      const data = reactive({
  8.          patternVisible: false,
  9.          debugVisible: false,
  10.          aboutExeVisible: false,
  11.      })
  12.      const content = ref(‘content’)
  13.      //使用toRefs解构
  14.      const { patternVisible, debugVisible, aboutExeVisible } = toRefs(data)
  15. </script>

3、method方法的使用

代码如下（示例）：

  1. <template >
  2.      <button @click=“onClickHelp”>系统帮助</button>
  3. </template>
  4. <script setup>
  5. import {reactive} from ‘vue’
  6. const data = reactive({
  7.          aboutExeVisible: false,
  8. })
  9. // 点击帮助
  10. const onClickHelp = () => {
  11.      console.log(`系统帮助`)
  12.      data.aboutExeVisible = true
  13. }
  14. </script>

4、watchEffect的使用

代码如下（示例）：

  1. <script setup>
  2. import {
  3.      ref,
  4.      watchEffect,
  5. } from ‘vue’
  6. let sum = ref(0)
  7. watchEffect(()=>{
  8.      const x1 = sum.value
  9.      console.log(‘watchEffect所指定的回调执行了’)
  10. })
  11. </script>

5、watch的使用

代码如下（示例）：

  1. <script setup>
  2.      import {
  3.          reactive,
  4.          watch,
  5.      } from ‘vue’
  6.          //数据
  7.          let sum = ref(0)
  8.          let msg = ref(‘你好啊’)
  9.          let person = reactive({
  10.                      name:‘张三’,
  11.                      age:18,
  12.                      job:{
  13.                      j1:{
  14.                      salary:20
  15.                      }
  16.                      }
  17.                      })
  18.      // 两种监听格式
  19.      watch([sum,msg],(newValue,oldValue)=>{
  20.              console.log(‘sum或msg变了’,newValue,oldValue)
  21.              },{immediate:true})
  22.          watch(()=>person.job,(newValue,oldValue)=>{
  23.          console.log(‘person的job变化了’,newValue,oldValue)
  24.          },{deep:true})
  25. </script>

6、computed计算属性的使用

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

  1. <script setup>
  2.      import {
  3.          reactive,
  4.          computed,
  5.      } from ‘vue’
  6.      //数据
  7.      let person = reactive({
  8.          firstName:‘小’,
  9.          lastName:‘叮当’
  10.          })
  11.      // 计算属性简写
  12.      person.fullName = computed(()=>{
  13.          return person.firstName + ‘-‘ + person.lastName
  14.          })
  15.      // 完整写法
  16.      person.fullName = computed({
  17.          get(){
  18.          return person.firstName + ‘-‘ + person.lastName
  19.          },
  20.          set(value){
  21.          const nameArr = value.split(‘-‘)
  22.          person.firstName = nameArr[0]
  23.          person.lastName = nameArr[1]
  24.          }
  25.      })
  26. </script>

7 、props父子传值的使用

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

  1. <template>
  2.      <span>{{props.name}}</span>
  3. </template>
  4. <script setup>
  5.      import { defineProps } from ‘vue’
  6.      // 声明props
  7.      const props = defineProps({
  8.      name: {
  9.          type: String,
  10.          default: ’11’
  11.      }
  12.      })
  13.      // 或者
  14.      //const props = defineProps([‘name’])
  15. </script>

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

  1. <template>
  2.      <child :name=‘name’/>
  3. </template>
  4. <script setup>
  5.      import {ref} from ‘vue’
  6.      // 引入子组件
  7.      import child from ‘./child.vue’
  8.      let name= ref(‘小叮当’)
  9. </script>

8 、emit子父传值的使用

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

  1. <template>
  2.      <a-button @click=“isOk”>
  3.          确定
  4.      </a-button>
  5. </template>
  6. <script setup>
  7. import { defineEmits } from ‘vue’;
  8. // emit
  9. const emit = defineEmits([‘aboutExeVisible’])
  10. /**
  11.      * 方法
  12.      */
  13. // 点击确定按钮
  14. const isOk = () => {
  15.      emit(‘aboutExeVisible’);
  16. }
  17. </script>

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

  1. <template>
  2.      <AdoutExe @aboutExeVisible=“aboutExeHandleCancel” />
  3. </template>
  4. <script setup>
  5. import {reactive} from ‘vue’
  6. // 导入子组件
  7. import AdoutExe from ‘../components/AdoutExeCom’
  8. const data = reactive({
  9.      aboutExeVisible: false,
  10. })
  11. // content组件ref
  12. // 关于系统隐藏
  13. const aboutExeHandleCancel = () => {
  14.      data.aboutExeVisible = false
  15. }
  16. </script>

9、获取子组件ref变量和defineExpose暴露

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

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

  1. <template>
  2.      <p>{{data }}</p>
  3. </template>
  4. <script setup>
  5. import {
  6.      reactive,
  7.      toRefs
  8. } from ‘vue’
  9. /**
  10.      * 数据部分
  11.      * */
  12. const data = reactive({
  13.      modelVisible: false,
  14.      historyVisible: false,
  15.      reportVisible: false,
  16. })
  17. defineExpose({
  18.      …toRefs(data),
  19. })
  20. </script>

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

  1. <template>
  2.      <button @click=“onClickSetUp”>点击</button>
  3.      <Content ref=“content” />
  4. </template>
  5. <script setup>
  6. import {ref} from ‘vue’
  7. // content组件ref
  8. const content = ref(‘content’)
  9. // 点击设置
  10. const onClickSetUp = ({ key }) => {
  11.      content.value.modelVisible = true
  12. }
  13. </script>
  14. <style scoped lang=“less”>
  15. </style>

10、路由useRoute和us eRouter的使用

代码如下（示例）：

  1. <script setup>
  2.      import { useRoute, useRouter } from ‘vue-router’
  3.      // 声明
  4.      const route = useRoute()
  5.      const router = useRouter()
  6.      // 获取query
  7.      console.log(route.query)
  8.      // 获取params
  9.      console.log(route.params)
  10.      // 路由跳转
  11.      router.push({
  12.          path: `/index`
  13.      })
  14. </script>

11、store仓库的使用

代码如下（示例）：

  1. <script setup>
  2.      import { useStore } from ‘vuex’
  3.      import { num } from ‘../store/index’
  4.      const store = useStore(num)
  5.      // 获取Vuex的state
  6.      console.log(store.state.number)
  7.      // 获取Vuex的getters
  8.      console.log(store.state.getNumber)
  9.      // 提交mutations
  10.      store.commit(‘fnName’)
  11.      // 分发actions的方法
  12.      store.dispatch(‘fnName’)
  13. </script>

12、await的支持

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

代码如下（示例）：

  1. <script setup>
  2.      import api from ‘../api/Api’
  3.      const data = await Api.getData()
  4.      console.log(data)
  5. </script>

13、provide 和 inject 祖孙传值

父组件代码如下（示例）

  1. <template>
  2.      <AdoutExe />
  3. </template>
  5. <script setup>
  6.      import { ref,provide } from ‘vue’
  7.      import AdoutExe from ‘@/components/AdoutExeCom’
  9.      let name = ref(‘Jerry’)
  10.      // 使用provide
  11.      provide(‘provideState’, {
  12.      name,
  13.      changeName: () => {
  14.          name.value = ‘小叮当’
  15.      }
  16.      })
  17. </script>
  18. 子组件代码如下（示例）：
  19. <script setup>
  20.      import { inject } from ‘vue’
  21.      const provideState = inject(‘provideState’)
  23.      provideState.changeName()
  24. </script>

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

标签

相关推荐

发表评论