setup语法糖

最新推荐文章于 2024-02-01 17:46:47 发布

山河亦问安

最新推荐文章于 2024-02-01 17:46:47 发布

阅读量390

点赞数 1

分类专栏： Vue 文章标签： javascript vue.js 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_43649937/article/details/128721236

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

本文介绍了Vue3.2中setup函数的语法糖特性，如无需return即可在模板中使用变量，直接使用await而无需async，以及组件间通信的方式，包括props和emit的父子传递，provide和inject的祖孙传递，还有toRefs的使用和Watch函数的深度监听功能。

摘要由CSDN通过智能技术生成

在vue3.0中，setup函数中的变量必须return出来才能给template使用，3.2中使用setup语法糖无需return变量就可以在template中使用了，而且引入的组件可以直接使用，无需再通过components进行注册。setup 语法糖中可直接使用 await，不需要写 async ， setup 会自动变成 async setup

父子组件传值props，子组件给父组件传值emit

父组件

<script setup>
  import HelloWorld from "./components/HelloWorld.vue"
  import {ref} from "vue"
  const msg=ref("父组件传值")
  let message=ref("")
  const go=(val)=>{
    message.value=val
  }
</script>

<template>
 <HelloWorld :msg="msg" @event="go"></HelloWorld>
  {{message}}

</template>

子组件

<script setup>
    import {ref} from "vue"
    const msg=ref("父组件传值")
    const emit=defineEmits(["event"])
    const btn=()=>{
        emit("event","子组件的值")
    }
</script>

<template>
    <h>{{msg}}</h><br>
    <h>我是子组件</h><br>
    <button @click="btn">子组件传值</button>
</template>

provide 和 inject 祖孙传值

父组件

<script setup>
  import HelloWorld from "./components/HelloWorld.vue"
  import {ref} from "vue"
  import {provide} from "vue"
  const name=ref("张飞")
  provide("provideData",{
    name
  })
</script>

<template>
 <HelloWorld ></HelloWorld>
</template>

子组件

<script setup>
    import {inject} from "vue"
  const provideData=inject("provideData")

</script>

<template>
    <h>{{provideData.name}}</h><br>
</template>

toRefs的使用

只能搭配Reactive,不能搭配Ref

<script setup>
  import HelloWorld from "./components/HelloWorld.vue"
  import {ref,reactive,toRefs} from "vue"
  const state=reactive({
    username:"root"
  })
  const {username}=toRefs(state)
  const change=()=>{
   username.value=""
  }
</script>

<template>
 {{username}}<br>
  <button @click="change">改变</button>
</template>

Watch函数（这个函数代码为了省事引用某博文）

  watch(
            ()=>message.value,
            (val,preVal)=>{
                //val为修改后的值,preVal为修改前的值
                console.log("message",val,preVal)
            },
            {
                //如果加了这个参数，值为true的话，就消除了惰性，watch会在创建后立即执行一次
                //那么首次执行，val为默认值,preVal为undefined
                immediate:true,
                //这个参数代表监听对象时，可以监听深度嵌套的对象属性
                //比如message是一个对象的话，可以监听到message.a.b.c，也就是message下的所有属性
                deep:true,
            }
        )

   watch(
            ()=>[message.value,count.value],
            ([messageVal,messagePreVal],[countVal,countPreVal])=>{
                //监听多个源用数组传入
                console.log("messageVal,messagePreVal",messageVal,messagePreVal)
                console.log("countVal,countPreVal",countVal,countPreVal)
            },
        )