vue--平行组件的传值 2018-11-05

平行组件的传参需要额外借助定义一个vue对象(var vm1 = new Vue({}))通过这个对象的$emit进行推送vm.$emit("要推送给谁",推送的内容)。。。。在平行组件当中通过自定义的对象vm.$on("谁要接受",function(msg){             //要推送给谁和谁要接受,他们两个的值是一样的,都是同一个事件

    这个函数的参数就是平行组件传过来的参数

})

例如下面代码:

<div id="out">   //容器

        <v-a></v-a>

        <v-b></v-b>

        <v-c></v-c>

</div>

<template id="aa">//a组件

<div>

    <h3>a组件</h3>

    <p>{{str}}</p>

    <button @click="tap()">发送数据</button>

</div>

</template>

<template id="bb">//b组件

<div>

<h3>b组件</h3>

<p>{{str}}</p>

<button @click="tap()">发送数据</button>

</div>

</template>

<template id="cc">//c组件

<div>

<h3>c组件</h3>

<p>接收数据aa——————{{stt}}</p>

<p>接收数据bb——————{{sty}}</p>

</div>

//把a。b组件的str发送到c组件

</template>

</body>

<script type="text/javascript">

var vm1 = new Vue({});额外定义的vue对象,通过这个对象进行传值

var vm = new Vue({

el:'#out',

components:{

'v-a':{

template:'#aa',

data:function(){

return{

str:'我是aa'

}

},

methods:{

tap(){

vm1.$emit('isa',this.str)//进行推送

}

}

},

'v-b':{

template:'#bb',

data:function(){

return{

str:'我是bb'//进行推送

}

},

methods:{

tap(){

vm1.$emit('isb',this.str)//进行推送

}

}

},

'v-c':{

template:'#cc',

data:function(){

return{

stt:'',

sty:''

}

},

mounted(){

        vm1.$on('isa',function(msg){.//接受的后一个值是一个函数

        this.stt = msg

        }.bind(this))//进行接受

            vm1.$on('isb',function(msg){

            this.sty = msg

            }.bind(this))

},

methods:{

},

computed:{

},

components:{

}

}

}

})

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 可能,我们每个人的眼里就都只有自己吧,在任何事发生后,我们的第一反应就是,我没有错!然后千方百计的给自己找借口。 ...
    mo刘大美阅读 3,795评论 0 0
  • 最近想了一下过去的生活,发现自己成长了不少,最大的特点就是自己不再抱怨了。 其实,抱怨这种情绪很容易被感染,我之前...
    沫小祭阅读 1,066评论 0 0
  • 明天就要回娘家了,心里是有些迫不及待的,今天就开始收拾行李,大宝小宝我的对象的衣服,乱七八糟的小物品,就像搬家...
    我就是我不一样的烟火_47ef阅读 1,573评论 1 1