vue组件兄弟传值

最新推荐文章于 2024-02-23 17:56:29 发布

cuiZero0

最新推荐文章于 2024-02-23 17:56:29 发布

阅读量73

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43991433/article/details/113932482

版权

vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、步骤

1.单独的事件中心管理组件的通信

var e =new Vue()

2.监听事件
一般放在生命周期函数里面
mounted：function（）{
}

e.$on('事件名称'，（接收传递的参数）=>{
	//执行传递参数的事件
})

3.触发事件
在事件里面执行

e.$emit('事件名称',参数)

4.销毁事件

e.$off('事件名称')

二、案例

此案例点击让各自兄弟变化
1.定义组件；

 Vue.component('teb',
            {
            data:function(){
               return{ 
                   mes:0
                }
            },
            template:`
            <div>
            <div>{{mes}}</div>
            <button @click='btn1'>点击我兄弟加2</button>
            </div>
            `,
Vue.component('teb1',
            {
            data:function(){
               return{ 
                   mes:0
                }
            },
            template:`
            <div>
            <div>{{mes}}</div>
            <button @click='btn2'>点击我兄弟加1</button>
            </div>
            `,
    
            )

2.显示组件

  <div id="app">
        <teb></teb>
        <teb1></teb1>
    </div>

3.创建实例

var e =new Vue()

4.监听事件
分别在各自组件下创建监听事件

 mounted:function(){
                e.$on('add-two',(val)=>{
                    this.mes+=val
                })
            },

在周期函数里面监听事件，接收参数并且处理；
5.触发事件
分别在各自函数下执行触发事件

 methods:{
                btn2:function(){
                    e.$emit('add-two',1)
                }
            }

以下是所有代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <teb></teb>
        <teb1></teb1>
    </div>
    <script>
        var e=new Vue();
       Vue.component('teb',
            {
            data:function(){
               return{ 
                   mes:0
                }
            },
            template:`
            <div>
            <div>{{mes}}</div>
            <button @click='btn1'>点击我兄弟加2</button>
            </div>
            `,
            mounted:function(){
                e.$on('add-two',(val)=>{
                    this.mes+=val
                })
            },
            methods:{
                btn1:function(){
                    e.$emit('add-one',2)
                }
            }
        }),
            Vue.component('teb1',
            {
            data:function(){
               return{ 
                   mes:0
                }
            },
            template:`
            <div>
            <div>{{mes}}</div>
            <button @click='btn2'>点击我兄弟加1</button>
            </div>
            `,
            mounted:function(){
                e.$on('add-one',(val)=>{
                    this.mes+=val
                })
            },
            methods:{
                btn2:function(){
                    e.$emit('add-two',1)
                }
            }
        }
    
            )
        var vm=new Vue({
            el:'#app',   
        })
    </script>
</body>
</html>

cuiZero0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件兄弟传值

一、步骤1.单独的事件中心管理组件的通信var e =new Vue()2.监听事件一般放在生命周期函数里面mounted：function（）{}e.$on('事件名称'，（接收传递的参数）=>{ //执行传递参数的事件})3.触发事件在事件里面执行e.$emit('事件名称',参数)4.销毁事件e.$off('事件名称')二、案例此案例点击让各自兄弟变化1.定义组件； Vue.component('teb', {
复制链接

扫一扫