欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue2.0组件之间如何通信

程序员文章站 2022-07-13 22:45:04
...

1.父组件传递数据给子组件

通过props属性来实现

具体代码如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/vue.js"></script>

    </head>
    <body>
    <div class="box">
        <aaa :msg="a"></aaa>
    </div>
    <template id="aa">
        <div>
            <span>我是子组件</span>
            <p>{{msg}}</p> //子组件使用
        </div>
    </template>
    <script type="text/javascript">
    new Vue({
        el:'.box',
        data:{

                a:'我是父组件数据'

        },
        components:{
            'aaa':{
                props:['msg'],//通过props属性来实现
            template:'#aa',

            }
        }
    })
    </script>
    </body>
</html>

props的写法:

props: ['msg'] //通常这种写法用的多

或者

props: {
    msg: Array //这样可以指定传入的类型,如果类型不对,会警告
}

或者

props: {
    msg: {
        type: Array,
        default: [0,0,0] //这样可以指定默认的值
    }
}

以上就实现了父组件向子组件传递数据.

但是有时也有需求就是子组件可以改变父组件传递的数据,代码如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/vue.js"></script>

    </head>
    <body>
    <div class="box">
        <h2>{{getData.a}}</h2>
        <aaa :msg="getData"></aaa>
    </div>
    <template id="aa">
        <div>
            <span>我是子组件</span>
            <input type="button" value='按钮' @click="change">
            <strong>{{msg.a}}</strong>
        </div>
    </template>
    <script type="text/javascript">
    new Vue({
        el:'.box',
        data:{
            getData:{
                a:'我是父组件数据' //父组件的数据格式是对象即可
            }
        },
        components:{
            'aaa':{
                    props:['msg'],
                    template:'#aa',
                    methods:{
                        change(){
                            this.msg.a='我变化了'
                        }
                    }
                }
        }
    })
    </script>
    </body>
</html>

2.非父子组件之间互相通信 (这时可以通过eventHub来实现通信.所谓eventHub就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件.)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="js/vue.js"></script>
    </head>
    <body>
    <div class="box">
        <aaa></aaa>
        <bbb></bbb>
        <ccc></ccc>
    </div>
    <script type="text/javascript">
    var Event=new Vue();//创建事件中心
    var A={
        template:`<div>
        <span>我是A组件</span>
        <input type="button" value="把A传给C" @click="send" >
                 </div>`
        ,
        data(){
            return {
                a:'我是A数据'
            }
        },
        methods:{
            send(){
                Event.$emit('a-msg',this.a)
            }
        }
    }

    var C={
        template:`<div>
        <span>我是C组件</span>
        <div>
            <span>{{c}}</span>
        </div>
        `
        ,
        data(){
            return {
                c:''
            }
        },
        mounted(){
            Event.$on('a-msg',function(a){
                this.c=a    
            }.bind(this))
        }
    }
    new Vue({
        el:'.box',
        components:{
            'aaa':A,
            'bbb':B,
            'ccc':C
        }
    })
    </script>
    </body>
</html>

3.子组件向父组件传递数据

子组件:

<template>
    <div @click="up"></div>
</template>

methods: {
    up() {
        this.$emit('upup','hehe'); //主动触发upup方法,'hehe'为向父组件传递的数据,传递多个数据中间用逗号隔开
    }
}

父组件:

<div>
    <child @upup="change" ></child> //监听子组件触发的upup事件,然后调用change方法
</div>
data(){
        return {
            msg1:''
        }
},
methods: {
    change(msg) {
        this.msg1 = msg;
    }
}

以上就是vue2.0中组件通信方式,写的比较详细是为了以后自己哪天忘记能快速想起来,也希望自己写的对别人也有帮助,大家一起学习一起进步o

相关标签: vue2-0