vue组件兄弟传值

一、步骤

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>

你可能感兴趣的:(vue组件兄弟传值,vue)