在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)
},
)
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/197051.html
