vue组件之间的数据共享

最新推荐文章于 2024-07-19 21:03:03 发布

原创最新推荐文章于 2024-07-19 21:03:03 发布 · 494 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

前端专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了Vue应用中，如何在父组件App.vue向子组件Left.vue和Right.vue传递数据，以及通过自定义属性和事件总线（Event Bus）实现子组件间的通信。展示了使用props和$emit/$on来传递和监听数据的方法。

vue组件之间数据共享

父向子传递数据

父组件App.vue

<template>
    <div id="app">
        <h1>APP根组件----{{this.msg}}-----{{countFromSon}</h1>
        <hr>
        <div class="box">
            <Left :msg="msg" :user="userinfo"></Left>
        </div>
    </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

    export default {
        name: 'App',
        components: {
            Left,Right
        },
        data(){
            return{
                msg:'hello',
                userinfo:{
                    name:'wsc',
                    age:18
                },
                //定义一个countFromSon接受子组件传来的数据
                countFromSon:0
            }
        },
        methods:{
            getNewCount(val){
                this.countFromSon=val
            },
            getNewName(val){
                this.msg=val
            }
        }

    }
</script>

<style>
    #app {
        padding: 1px 20px 20px;
        background-color: #efefef;
    }
    .box{
        display: flex;
    }

</style>

子组件Left.vue

<template>
    <div class="left-container">
        <h3>Left组件</h3>
        //子组件通过自定义属性调用父组件的值
        <p>message的值是{{ msg }}</p>
        <p>user的值是{{ user }}</p>
        <button @click="message='abc'">修改msg</button>
        <button @click="user.name='zs'">修改user</button>
    </div>
</template>

<script>
import bus from '@/components/eventBus.js'
    export default {
        //父向子传递值，自定义属性
        props: ['msg', 'user'],
        data() {
            return {
                message:'left',
            }
        }
    }
</script>

<style scoped>
    .left-container {
        padding: 0 20px 20px;
        background-color: orange;
        min-height: 250px;
        flex: 1;
    }
</style>

子组件向父组件传递值

子组件Right.vue

<template>
    <div class="right">
        <h3>Right组件-----{{count}}</h3>
        <button @click="add">+1</button>
        <button @click="sub">-1</button>
    </div>
</template>

<script>
    import bus from '@/components/eventBus.js'
    export default {
        name: "Right",
        data(){
            return{
                msg:'',
                count:0,
                msgFromLeft:''
            }
        },
        methods:{
            //子组件向父组件传递值，自定义事件
            add(){
                this.count+=1
                this.$emit('numadd',this.count)
            },
            sub(){
                this.count-=1
                this.$emit('numsub',this.count)
            },
        }
    }
</script>

<style scoped>
    .right{
        padding: 0 20px 20px;
        background-color: lightskyblue;
        min-height: 250px;
        flex: 1;
    }
    h3 {
        color: black;
    }
</style>

父组件App.vue

<template>
    <div id="app">
        <h1>APP根组件----{{this.msg}}-----{{countFromSon}}</h1>
        <hr>
        <div class="box">
            <Left :msg="msg" :user="userinfo"></Left>
        </div>
    </div>
</template>

<script>
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'

    export default {
        name: 'App',
        components: {
            Left,Right
        },
        data(){
            return{
                msg:'hello',
                userinfo:{
                    name:'wsc',
                    age:18
                },
                //定义一个countFromSon接受子组件传来的数据
                countFromSon:0
            }
        },
        methods:{
            getNewCount(val){
                this.countFromSon=val
            }
        }
    }
</script>

<style>
    #app {
        padding: 1px 20px 20px;
        background-color: #efefef;
    }
    .box{
        display: flex;
    }

</style>

兄弟组件之间传递值

发送方Left.vue

<template>
    <div class="left-container">
        <h3>Left组件</h3>
        <button @click="sendMsg">发送</button>
    </div>
</template>

<script>
import bus from '@/components/eventBus.js'
    export default {
        data() {
            return {
                str:'黑云压城城欲摧，甲光向日金鳞开。\n' +
                    '角声满天秋色里，塞上燕脂凝夜紫。\n' +
                    '半卷红旗临易水，霜重鼓寒声不起。\n' +
                    '报君黄金台上意，提携玉龙为君死。'
            }
        },
        methods: {
        //使用 bus.$emit('要触发的事件的名字',发送的消息)
            sendMsg(){
                bus.$emit('share',this.str)
                console.log('this.sendMsg()')
            }
        }
    }
</script>

<style scoped>
    .left-container {
        padding: 0 20px 20px;
        background-color: orange;
        min-height: 250px;
        flex: 1;
    }
</style>

eventBus.js

import Vue from 'vue'
//创建vue实例对象，向外导出vue实例对象
export default new Vue()

消息接收方Right.vue

<template>
    <div class="right">
        <h3>Right组件</h3>
        <p>{{msgFromLeft}}</p>
    </div>
</template>

<script>
    import bus from '@/components/eventBus.js'
    export default {
        name: "Right",
        data(){
            return{
                msgFromLeft:''
            }
        },
        created() {
        //通过bus.$on()方法进行监听
            bus.$on('share',(val)=>{
                this.msgFromLeft=val
            })
        }

    }
</script>

<style scoped>
    .right{
        padding: 0 20px 20px;
        background-color: lightskyblue;
        min-height: 250px;
        flex: 1;
    }
    h3 {
        color: black;
    }
</style>