最近在研究vue.js,总体来说还算可以,但是在网络开发群里有一些人问在单文件组件开发模式中非父子组件如何传值的问题,今天在这里讲讲,希望对大家有所帮助!
在官网api中的这段讲解很少,也很模糊;官网中说明如下:
<强>非父子组件通信:强>
有时候两个组件也需要通信(非父子关系)。在简单的场景下,可以使用一个空的Vue实例作为中央事件总线:
var总线=new Vue (); 一个中//触发组件的事件 公共汽车。发出(id-selected, 1)美元//在组件B创建的钩子中监听事件 公共汽车。美元(id-selected,函数(id) {//? })
<强>首先在main.js中加入数据,如下:强>
新Vue ({ 埃尔:“#应用”, 路由器, 模板:& lt; App/祝辞, 组件:{应用}, 数据:{ 总线:新Vue () } })
如何获取到这个空的vue对象公共汽车呢。在组件里面直接调用这个。美元根
& lt; template> & lt; div类="标题" @click=案谋?味精)”在{{味精}}& lt;/div> & lt;/template> & lt; script> 出口默认{ 名称:“第一次”, 数据(){ 返回{ 味精:“我是首页” } }, 方法:{ 变化(文本){ root.bus美元。美元发出(“呵呵”,文本) } } } & lt;/script> >之前然后在另一个组件内调用在事件接收,当然在组件销毁时解除绑定,使用在事件接收,当然在组件销毁时解除绑定,使用了方法
& lt; template> & lt; h2>{{味精}}& lt;/h2> & lt;/template> & lt; script> 出口默认{ 名称:“第二”, 数据(){ 返回{ 味精:“我是第二页的 } }, 创建(){ 让=这个; root.bus美元。美元(“呵呵”功能(t) { 那味精=N毒? t }) } } & lt;/script> >之前然后点击的时候就能传递值了,还等什么,快来试试吧!
以上这篇vue.js单文件组件中非父子组件的传值实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
vue.js单文件组件中非父子组件的传值实例