Detailed explanation of the usage example of Vue3 props

Props Statement

1. String array declaration props

<script setup lang="ts">
const props = defineProps(["cat"])
()
</script>

2. Object implementation props

<script setup lang="ts">
const props = defineProps({
    cat:string
})
</script>
//Cat variables can be used directly in the template<template>
  {{ cat }}
</template>

You can also use type annotation, which is the feature of ts.

<script setup lang="ts">
const props = defineProps<{
    cat?:string
}>()
</script>
// Or use the interfaceinterface animal{
    cat?:string
}
const props = defineProps<animal>()

3. Use camelCase (small camel nomenclature), which can be used directly in the template (such as the first example). Look at the code

defineProps({
  getSex: String
})
<template>
 {{getSex}}
</template>

4. Dynamic binding props

import {reactive} from "vue"
const data=reactive({
    article:{
        cat:"tom"
}
})
//Pass this cat below<span :animal=''></span>
//Then you can changecatThe attribute value can realize dynamic data transmission

Note: defineprops needs to be introduced in previous Vue versions, but it is not needed now. The above examples are based on the setup syntax sugar, namely <script setup lang="ts">. If you are not very familiar with setup syntax sugar, you need to use the props attribute in the script tag to obtain the passed data.

This is the end of this article about the detailed explanation of the use of Vue3 props. For more related content on using Vue3 props, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!