vue 组件的三种传值方式

最新推荐文章于 2025-07-05 13:44:41 发布

原创最新推荐文章于 2025-07-05 13:44:41 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了Vue.js中三种常见的组件间通信方式：父组件向子组件传递数据、子组件向父组件发送事件以及平行组件间的通信。通过实例展示了如何使用props、$emit和空的Vue对象实现这些通信。

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

一、父传子

关键词：添加属性 props

<body>
    <div id="edd">
        <v-fa></v-fa>
        <v-box> </v-box>
    </div>

    <template id="father">
        <div>
           <p>{{str}}</p>
            <button @click='tap'>向子组件传值</button>
            <hr/>
            <v-child :name='str1'></v-child> 
        </div>
    </template>

    <template id="child">
        <div>
            <p>{{this.name}}</p>

        </div>
    </template>

</body>
<script>
    var vm = new Vue({
        el:'#edd',
        components:{
            'v-fa':{
                template:'#father',
                data:function(){
                    return {
                        str:'我是父组件',
                        str1:''
                    }
                },
                methods:{
                    tap(){
                        this.str1=this.str 
                    }
                },
                components:{
                    'v-child':{
                        props:['name'],
                        template:'#child',
                        data:function(){
                            return{}
                        } 
                    }
                }   
            },
        
        }
    })
</script>

二、子传父

关键词：$emit 定义方法

<body>
    <div id="out">
        <v-father></v-father>
    </div>

    <template id="father">
        <div>
            <h1>father------{{str}}</h1>
           
            <hr>
            <v-child @to-parent="getdata"></v-child>

        </div>
    </template>

    <template id="child">
        <div>
            <h1>childr-------{{str}}</h1>
        </div>
    </template>
   
</body>

<script>
    var vm = new Vue({
        el:'#out',
        components:{
            'v-father':{
                template:'#father',
                data(){
                    return{
                        str:''
                    }
                },
                methods:{
                    getdata(msg){
                        this.str = msg
                    }
                },
                components:{
                    'v-child':{
                        template:'#child',
                        data(){
                            return{
                                str:'this is child'
                            }
                        },
                        created(){
                            this.$emit('to-parent',this.str)
                        }
                    }
                }
            }
        }
        
    })
</script>

三、平行组件传值

关键词：$emit $on 空的vue对象

<body>
    <div id="app">
        <v-a></v-a>
        <hr>
        <v-b></v-b>
    </div>
    <template id="a">
         <div>

            this is a {{str}}

            <button @click='tap'>send</button>

         </div>
    </template>

    <template id="b">
        <div>
            this is b {{str}}
            
        </div>
    </template>
</body>
<script>
    var vm1 = new Vue()

    var vm = new Vue({
        el:'#app',
        components:{
            'v-a':{
                template:'#a',
                data(){
                    return {
                        str:'this is a ,need to b'
                    }
                },
                methods:{
                     tap(){
                        vm1.$emit("isa",this.str)
                    }
                }
               

            },
            'v-b':{
                template:'#b',
                data(){
                    return{
                        str:''
                    }

                },
                mounted(){
                    var _this = this;
                    vm1.$on("isa",function(msg){
                        _this.str = msg
                    })
                }
            }
        }

    })
</script>