【vue3】组件通信_props的使用

props简介

1. 父传递子数据+typescript类型检查

父组件代码

<template>
    <!--写html-->
    <div class="container">
        <h1>我的第一个组件</h1>
        <Item :arrData="arrData" :a="testData" :otherData="otherData" />
    </div>
</template>
<script setup lang="ts">
    import Item from "./components/item.vue"
    import {ref} from "vue"
    import {reactive} from "@vue/runtime-core";

    let testData = ref("我修改了")

    let otherData = ref("其他数据")

    let arrData = reactive([
        {
            name:"张三",
            age:16,
            hobby:"打篮球"
        },{
            name:"张四",
            age:17
        },{
            name:"张五",
            age:18
        },
    ])

</script>

子组件代码

<template>
    <div class="itemStyle">
        <div>{{test}}</div>
        <div v-for="(item,index) in test.arrData" :key="index">
            <span>{{item.name}}</span>
            <span>{{item.age}}</span>
            <span>{{item.hobby}}</span>
        </div>
    </div>
</template>

<script setup lang="ts">

    import {defineProps} from "vue";
    
    //vue文件夹中，引入外部类型检测文件，需要把vue版本升级到3.4以上。
    import {type propsInterface} from "@/components/types";

    //可以通过propsInterface类型检查 父传子 的数据
    let test = withDefaults(defineProps<propsInterface>(),{
		//如果父组件没有传对应的属性，这里可以写属性的默认值
		arrData:[],
		a:1,
		otherData:""
	})
    
    console.log(test);
</script>

"@/components/types"文件下的ts文件代码

interface arrDataInterface{
    name:string
    age:number
    hobby?:string
}
export interface propsInterface{
    arrData:arrDataInterface[]
    otherData?:string
    a?:string
}

特别注意:vue文件夹中，引入外部类型检测文件，需要把vue版本升级到3.4以上。旧版本vue不支持ts使用外部文件引入

2. 子传递父数据

子组件代码

<template>
    <div class="itemStyle">
        <div>
            <button @click="handleSonToParent">子传父</button>
        </div>
    </div>
</template>

<script setup lang="ts">

    import {defineProps} from "vue";
    import {type propsInterface} from "@/components/types";
    
    //子传父
    const emit = defineEmits(['childData'])

    const handleSonToParent = ()=>{
        emit("childData",{a:1,b:2})
    }
</script>

父组件代码

<template>
    <!--写html-->
    <div class="container">
        <h1>我的第一个组件</h1>
        <Item @childData="handleChildData" />
    </div>
</template>
<script setup lang="ts">
    import Item from "./components/item.vue"

    const handleChildData = (val)=>{
        console.log("子传父",val);
    }

</script>

✨$踩坑不易，还希望各位大佬支持一下$

📃 $个人主页：$ 沉默小管

📃 $个人网站：$ 沉默小管

📃 $个人导航网站：$ 沉默小管导航网

📃 $我的开源项目：$ vueCms.cn

🔥 $技术交流QQ群：837051545$

👍 $点赞，你的认可是我创作的动力！$

⭐️ $收藏，你的青睐是我努力的方向！$

✏️ $评论，你的意见是我进步的财富！$

如果有不懂可以留言，我看到了应该会回复
如有错误，请多多指教