vue3 setup如何使用props

2022年7月22日08:14:19

setup是一个组件选项,在组件被创建之前,props 被解析之后执行。它是组合式 API 的入口。
他接受两个参数:

{Data} props{SetupContext} context

setup里边,第一个参数就是props,下面来看示例。
子组件propsTest.vue

<script lang="ts">import{ toRefs}from'vue'interfaceData{[key:string]:unknown}exportdefault{
    props:{
        text:{
            type:String,default:""},
        message:Number},setup(props:Data){const{text}=toRefs(props)const formatText=`Hi,${text.value}`return{
            formatText}}}</script><template><div>{text}}<!-- hello world-->{{formatText}}<!-- Hi,hello world-->{{message}}<!--233--></div></template>

父组件index.vue:

<script lang="ts">import{ ref}from"vue"import PropsTestfrom'./propsTest.vue'exportdefault{
    components:{PropsTest},setup(){const message= ref<number>(233)return{
            message}},}</script><template><div><PropsTest text="hello world":message="message"></PropsTest></div></template>

如果有同学喜欢用setup语法糖,那么需要用definePropsdefineProps是编译器宏,无需引入)定义props,那么咱们修改一下子组件propsTest.vue

<script setup lang="ts">import{ toRefs}from'vue'const props=defineProps({
    text:String,
    message:Number})const{text}=toRefs(props)const formatText=`Hi,${text&&text.value}`</script><template><div>{{text}}<!-- hello world-->{{formatText}}<!-- Hi,hello world-->{{message}}<!--233--></div></template>

  • 作者:小孟js
  • 原文链接:https://mengchengchang.blog.csdn.net/article/details/123576253
    更新时间:2022年7月22日08:14:19 ,共 1141 字。