vue3 defineProps的使用及案例

vue3 defineProps的使用

以下代码和内容的使用都是在vue3的setup中，未使用TS。

1、在父组件中定义

父组件：

<template>
        <showMessage
            :str="str"
            :num="num"
            :bool="bool"
            :arr="arr"
            :obj="obj"
            :date="date"
            :a = "a"
            :b="b"
            :getConsole="getConsole"
            id="abc"
            class="bcd"
        ></showMessage>
</template>
<script  setup>
import showMessage from './ShowMessage.vue'


    // 定义属性
    const str = '吃饭、睡觉、敲代码'
    const num =  100
    const bool = true
    const arr = ['apple', 'lemon', 'orange']
    const obj = {
                name: 'coderXiao',
                age: 18
            }
    const date = new Date()
    const a = Symbol('好好学习')
    const b = Symbol('天天向上')

    // 定义方法
    const getConsole = () => {
         console.log('传递给子组件的方法');
    }
</script>
<style lang="less" scoped>
 
</style>

子组件：

<template>
    <h3 v-bind="$attrs">字符串: {
   
   {props.str}}</h3>
    <h3>数字: {
   
   {props.num}}</h3>
    <h3>布尔: {
   
   {props.bool}}</h3>
    <h3>数组: {
   
   {props.arr}}</h3>
    <h3>对象: {
   
   {props.obj}}</h3>
    <h3>日期: {
   
   {props.date}}</h3>
    <h3>Symbol: {
   
   {props.a}} - {
   
   {props.b}}</h3>
</template>
<script setup>
    import { defineProps } from 'vue'
    const props = defineProps({
        str: String,
        num: Number,
        bool: Boolean,
        arr: Array,
        obj: Object,
        date: Date,
        getConsole: Function,
        message: Object,
        a: Symbol,
        b: Symbol
    })
    
    props.getConsole()
</script>

页面渲染效果

2、使用说明

1、在父组件中定义String、Number、Boolean、Array、Object、Date、Function、Symbol这些类型的数据
2、在子组件中通过defineProps API来进行接受
3、通过子组件事件修改变量值，同时将值传递给父组件，对父组件的变量进行赋值
4、向子组件传递非props的属性，用法及效果如下

### 3、案例
1、在父组件中定义tabBar并传递给子组件
2、子组件在页面进行渲染，并将点击的tab索引通过defineEmits发射给父组件
3、父组件接收子组件传递的数据，渲染tab对应的内容

父组件

```

子组件

<template>
    <div class="shopList">
        <div class="shopContent" 
        :class="{tabActive: currentIndex === index }"
        v-for="(tab, index) in tabBars" :key="index"
        @click="itemClick(index)">
            {
   
   {tab.name}}
        </div>
    </div>
</template>
<script  setup>
    import { defineProps,ref,defineEmits } from 'vue'
    // 接受父组件传递的数据
    const props = defineProps({
        tabBar: {
            type: Array,
            default: () => []
        }
    })

    // 定义属性
    const currentIndex = ref(0)
    const tabBars = JSON.parse(JSON.stringify(props.tabBar))


    // 定义发射给父组件的方法
    const emits = defineEmits(['tabClick'])

    // tab点击的方法
    const itemClick = (e) => {
        currentIndex.value = e
        emits('tabClick', currentIndex.value)
    }
</script>
<style lang="less" scoped>
.shopList {
    display: flex;
    justify-content: center;
    align-items: center;
    .shopContent {
        flex: 1;
        text-align: center;
        padding: 20px;
        cursor: pointer;
    }
    .tabActive {
        border-bottom: 3px solid #bf0706;
        color: #bf0706;
    }
}
</style>