详解"/>
Vue3 props的使用详解
Props 声明
1、字符串数组声明props
<script setup lang="ts">
const props = defineProps(["cat"])console.log(props.cat)
</script>
2.对象实现props
<script setup lang="ts">
const props = defineProps({cat:string
})
</script>//可以在模板中直接使用cat变量
<template>{{ cat }}
</template>
你还可以使用类型标注,这是ts的特性。
<script setup lang="ts">
const props = defineProps<{cat?:string
}>()
</script>//或者使用接口interface animal{cat?:string
}const props = defineProps<animal>()
3、使用camelCase(小驼峰命名法),可以在模板中直接使用(如第一个例子)。看代码
defineProps({getSex: String
})<template>{{getSex}}
</template>
4、动态绑定props
import {reactive} from "vue"const data=reactive({article:{cat:"tom"
}
})//下方传递这个cat<span :animal='data.article.cat'></span>//然后你就可以改变cat的属性值就可以实现动态传递数据了
注意事项:defineprops在之前的Vue版本中需要引入,但是现在是不需要了。上面几个例子是建立在setup语法糖的基础上编写的即<script setup lang="ts">,如果你不是太熟悉setup语法糖,那么就需要在script标签中使用setup(){}中使用props属性取得传递的数据
更多推荐
Vue3 props的使用详解
发布评论