尊重和保障人权,潘雨辰图片,工艺品批发市场
兄弟组件之间互相传值,需要建立一个“中转站”(新的vue实例),并且需要主动触发。
实例上的$on方法来接受监听。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>组件传值</title> <script src="vue.js"></script> </head> <body> <div id="box"> <child1></child1> <child2></child2> </div> <template id="c1"> <h1>~~~~~~我是哥哥~~~~{{msg}} <button @click='fn'>点击</button></h1> </template> <template id="c2"> <h3>~~~~~~我是弟弟~~~~{{msg2}}</h3> </template> </body> </html> <script> var hub=new vue(); // 1) 中转站,其中不需要设置任何参数 var vm=new vue({ el: '#box', components:{ child1:{ template:'#c1', data:function(){ return { msg: 'hello' } }, methods:{ fn:function(){ // 2) 主动触发监听(中转站触发监听) console.log(this.msg); //hello hub.$emit('change',this.msg) //$emit触发监听方法 } } }, child2:{ template:'#c2', data:function(){ return { msg2: 'world' } }, // 创建完成 new vue create mount // 钩子函数 created(){ // 3) 接收监听 $on('事件名称',function(val){}) val是传递过来的值 hub.$on('change',function(val){ console.log(val) //hello // this.msg2 = val; }) } } } }) </script>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
vue 路由懒加载中给 Webpack Chunks 命名的方法
网友评论