Vue props父组件向子组件传递数据与$emit子组件向父组件传递数据

最新推荐文章于 2025-03-31 20:20:39 发布

原创最新推荐文章于 2025-03-31 20:20:39 发布 · 831 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Vue props父组件向子组件传递数据 #Vue $emit子组件向父组件传递数据 #Vue 子父级交互 #Vue props与$emit子父级传递数据

vue 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍在Vue.js中如何实现子父组件之间的数据传递，包括父组件向子组件传递数据的方法和子组件向父组件发送数据的流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果需要子父级组件传递参数，就必须要有子父级关系，所以创建一个Parent.vue和一个Child.vue 。父组件中引入子组件，如图：

父组件代码

<template>
    <div>
        <h1>父组件</h1>
        <Child :title="getTitle" @ReceiveData="setData"></Child>
        <!--父组件向子组件传递数据以属性的方式进行传递 如：:title="getTitle"-->
        <!--父组件接收子组件传递过来的数据 把子组件设置的Key当成自定义事件来接收数据 如：@ReceiveData="setData"-->
        {{msg}}
    </div>
</template>

<script>
    import Child from './Child'//父组件中引入子组件
    export default {
        name: "Parent",
        data(){
            return{
                getTitle:'父组件向子组件传递的数据',
                msg:''
            }
        },
        components:{
            Child
        },
        methods:{
            setData(data){
                this.msg = data//把子组件传递过来的数据赋值给msg
            }

        }
    }
</script>

<style scoped>

</style>

子组件代码

<template>
    <div>
        <h1>这是子组件</h1>
        {{title}}
        <!--把父组件传递过来的数据进行渲染-->
        <button @click="Transmit">点击按钮子组件向父组件传递数据</button>
    </div>
</template>

<script>
    export default {
        name: "Child",
        data(){
            return{
                setTransmit:'子组件向父组件传递的参数'
            }
        },
        props:{//子组件中用props接收父组件传递的数据
            title:{
                type:String,//验证传递的数据类型
                default:'默认值'//给传递过来的数据添加默认值，如果没有传递数据则显示default中的信息
            }
        },
        methods:{
            Transmit(event){
                //子组件向父组件传递数据使用this.$emit  里面有两个参数 1、Key  2、数据
                this.$emit('ReceiveData',this.setTransmit)
            }
        }
    }
</script>

<style scoped>

</style>