vue单一事件中心管理组件通信

最新推荐文章于 2024-01-01 00:42:43 发布

slq_lly

最新推荐文章于 2024-01-01 00:42:43 发布

阅读量348

点赞数

分类专栏： H5 移动端 vue 文章标签： vue组件通信组件通信组件 vue传参 vue组件

本文链接：https://blog.csdn.net/slq_lly/article/details/83542753

版权

H5 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

移动端

7 篇文章 0 订阅

订阅专栏

vue

1 篇文章 0 订阅

订阅专栏

vue传递数据有很懂中方法，组件之间传参，可以建一个父级，把组件信息传给父级，然后再用props继承过来，这是props传递。

今天说的是单一事件管理通信，这个可以简单解决传参问题

做这个我们首先得准备一个空的实例对象，为什么要准备，因为准备了空对象就之后，这个空对象上就会挂上各种方法，什么$on啊，$emit啊，这个空对象一定要是全局的，为什么，因为每个组件都要访问，所以首先全局定义一个空的实例对象，基本的语法格式如下：

var Event=new Vue();

Event.$emit(事件名称, 数据)

Event.$on(事件名称,function(data){
	//data
}.bind(this));//在这个里面this指向会发生变化，要么bind一下，要么用_this代替this来重定向

实例代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件通信</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>

    </style>
    <script src="vue.js"></script>
    <script>
        //准备一个空的实例对象
        var Event=new Vue();


        var A={
            template:`
                <div>
                    <span>我是A组件</span> -> 
                    <ul v-for="(k,v) in a">
                        <li>{{k}}</li>
                    </ul>
                    <input type="button" value="把A数据给C" @click="send">
                </div>
            `,
            methods:{
                send(){
                    Event.$emit('a-msg',this.a);
                }
            },
            data(){
                return {
                    a:{
                        a:'nihao',
                        b:'ni bu hao'
                    }
                }
            }
        };
        var B={
            template:`
                <div>
                    <span>我是B组件</span> -> {{a}}
                    <input type="button" value="把B数据给C">
                </div>
            `,
            data(){
                return {
                    a:'我是b数据'
                }
            }
        };
        var C={
            template:`
                <div>
                    <h3>我是C组件</h3>
                    <span>接收过来的A的数据为: {{a}}</span>
                </div>
            `,
            data(){
                return {
                    a:'',
                    b:''
                }
            },
            mounted(){
                //var _this=this;
                Event.$on('a-msg',function(res){
                    this.a=res;
                }.bind(this));
            }
        };


        window.onload=function(){
            new Vue({
                el:'#box',
                components:{
                    'com-a':A,
                    'com-b':B,
                    'com-c':C
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <com-a></com-a>
        <com-b></com-b>
        <com-c></com-c>
    </div>
</body>
</html>

slq_lly

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue单一事件中心管理组件通信

vue传递数据有很懂中方法，组件之间传参，可以建一个父级，把组件信息传给父级，然后再用props继承过来，这是props传递。今天说的是单一事件管理通信，这个可以简单解决传参问题做这个我们首先得准备一个空的实例对象，为什么要准备，因为准备了空对象就之后，这个空对象上就会挂上各种方法，什么$on啊，$emit啊，这个空对象一定要是全局的，为什么，因为每个组件都要访问，所以首先全局定义一个空...
复制链接

扫一扫

专栏目录