vue组件传值

最新推荐文章于 2025-06-19 13:19:11 发布

原创最新推荐文章于 2025-06-19 13:19:11 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vue中如何进行组件间的通信，包括父组件通过props向子组件传递数据，以及子组件利用$emit向父组件发送事件并传递信息。同时提到了非父子组件间通信的一种解决方案，即通过公共组件作为中介进行数据传递。

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

父组件向子组件传值

使用props传值

父组件

<template>
    <div id="list">
        <info :info="info"></info> //使用组件，并绑定要传递的值
    </div>
</template>

<script>
import info from "./info"   //引入子组件
export default {
    name: 'list',
    components: {
        info
    },
    data(){
        return {
            info:"详情页"
        }
    }
}
</script>

子组件

<template>
    <div id="header">
        {{info}}详情
    </div>
</template>

<script>
export default {
    name: 'App',
    props:["info"],//接收父组件传过来的值，并显示在页面上
    components: {}
}
</script>

子组件向父组件传值

使用$emit传值

父组件

<template>
    <div id="list">
        {{msg}}
            <div>
                <info @getList="getListbyinfo"></info>    //通过自定义事件getList监听子组件的状态
            </div>
        </div>
    </div>
</template>
<script>
import info from "./info"
export default {
    name: 'list',
    components: {
        info
    },
    data(){
        return {
            msg:""
        }
    },
    methods:{
        getListbyinfo(byinfo){
            this.msg=byinfo;
        }
    }
}
</script>

子组件

<template>
    <div id="header">
        <button @click="parchange">点击传值</button>
    </div>
</template>
<script>
export default { 
    name: 'App',
    props:["info"],
    methods:{
        parchange(){ //绑定事件，并通过$emit出发父组件的自定义事件getList
            this.$emit("getList","要从子组件传过来的值")
        }
    }
}
</script>

*如果是两个非父子组件进行传值，可以先新建一个公共组件，然后通过父子组件进行传值