Vue2.x 兄弟组件之间的数据传递

最新推荐文章于 2023-10-17 15:32:32 发布

weixin_33777877

最新推荐文章于 2023-10-17 15:32:32 发布

阅读量218

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/chillLife/p/11054884.html

版权

兄弟组件之间的数据传递

思路：创建三个组件分别是<my-aaa>、<my-bbb>、<my-ccc>，在<my-ccc>中接收<my-aaa>与<my-bbb>发送的数据，当改变<my-aaa>或<my-bbb>所发送的数据时，<my-ccc>接收的数据也随之改变

html

<body>
    <div id="box">
        <my-aaa></my-aaa>
        <my-bbb></my-bbb>
        <my-ccc></my-ccc>
    </div>
    <template id="aaa">
        <div>
            <input type="button" @click="changed" value="我是aaa的按钮">
        </div>
    </template>
    <template id="bbb">
        <div>
            <input type="button" @click="changed" value="我是bbb的按钮">
        </div>
    </template>
    <template id="ccc">
        <div>
            <h1>{{a}}</h1>
            <h1>{{b}}</h1>
        </div>
    </template>
</body>

script

需要在外部单放一个实例化对象，用于跟所有人说话。

就是传话用的，本身没有什么意义。

var vm = new Vue();

分别创建三个组件，两个传递数据，一个接收数据。

new Vue({
        el:'#box',
        components:{
            "my-aaa":{
                data(){
                    return {
                        aMsg:"我是a的数据"
                    }
                },
                template:'#aaa'
            },
            "my-bbb":{
                data(){
                    return {
                        bMsg:'我是b的数据'
                    }
                },
                template:'#bbb'
            },
            "my-ccc":{
                template:'#ccc',
            }
        }
    })

传递数据，需要用 $emit('key',value)

key：用什么名字传递

value：传递的数据

methods:{
    changed(){
        vm.$emit('a-msg',this.aMsg);
    }
}

接收数据，需要用 $on('key',(data)={})

key：接收数据的名字

data：可以随意定义，相当于一个回调函数

data(){
    return {
        a:'暂无a的数据',
        b:'暂无b的数据'
    }
},
mounted(){
    vm.$on('a-msg',(data)=>{
        this.a = data;
    });
    vm.$on('b-msg',(data)=>{
        this.b = data;
    })
}

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>组件传递</title>
    <script src="bower_components/vue/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <my-aaa></my-aaa>
        <my-bbb></my-bbb>
        <my-ccc></my-ccc>
    </div>
    <template id="aaa">
        <div>
            <input type="button" @click="changed" value="我是aaa的按钮">
        </div>
    </template>
    <template id="bbb">
        <div>
            <input type="button" @click="changed" value="我是bbb的按钮">
        </div>
    </template>
    <template id="ccc">
        <div>
            <h1>{{a}}</h1>
            <h1>{{b}}</h1>
        </div>
    </template>
</body>
<script>
    var vm = new Vue();

    new Vue({
        el:'#box',
        components:{
            "my-aaa":{
methods:{
    changed(){
        vm.$emit('a-msg',this.aMsg);
    }
},
                data(){
                    return {
                        aMsg:"我是a的数据"
                    }
                },
                template:'#aaa'
            },
            "my-bbb":{
                methods:{
                    changed(){
                        vm.$emit('b-msg',this.bMsg);
                    }
                },
                data(){
                    return {
                        bMsg:'我是b的数据'
                    }
                },
                template:'#bbb'
            },
            "my-ccc":{
                template:'#ccc',
                data(){
                    return {
                        a:'暂无a的数据',
                        b:'暂无b的数据'
                    }
                },
                mounted(){
                    vm.$on('a-msg',(data)=>{
                        this.a = data;
                    });
                    vm.$on('b-msg',(data)=>{
                        this.b = data;
                    })
                }
            }
        }
    })
</script>
</html>

转载于:https://www.cnblogs.com/chillLife/p/11054884.html

weixin_33777877

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue2.x 兄弟组件之间的数据传递

兄弟组件之间的数据传递思路：创建三个组件分别是<my-aaa>、<my-bbb>、<my-ccc>，在<my-ccc>中接收<my-aaa>与<my-bbb>发送的数据，当改变<my-aaa>或<my-bbb>所发送的数据时，<my-ccc>接收的数据也随之改变html&lt...
复制链接

扫一扫