DDR爱好者之家

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
站长资源 2024/11/24 佚名
73 1538
DDR爱好者之家 Design By 杰米

vue中我们常常用到组件. 那么组件总体可以分为如下的几种关系.

父子组件, 爷孙组件, 兄弟组件. 这几种组件之间是如何通信的呢"htmlcode"> 

Vue.component('child', {
 props: ['fname'],
 template: `
  <div class="child">
   这是儿子, 我爸爸是{{fname}}
   <button @click="$emit('toFather')">点我通知爸爸</button>
  </div>
 `
})

Vue.component('father', {
 data() {
  return {
   info: '无消息'
  }
 },
 template: `
  <div class="father">
   这是父亲, {{info}}
   <child fname="father" @toFather="getSonMsg"></child>
  </div>
 `,
 methods: {
  getSonMsg() {
   this.info = '我收到儿子传来的消息了'
  }
 }
})
new Vue({
 el: '#app',
})

注意上面的组件定义顺序不能换

让后我们在html文件中写入即可

<div id="app">
  <father></father>
 </div>

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

点击按钮后发现我们的父组件发生了变化

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

点击这里可以查看效果

爷孙组件通信

因为vue只是说明了父子组件如何通信, 那么爷孙组件是没有办法直接通信的. 但是它们可以分解为两个父子组件通信.

即爷爷和父亲看成是一个父子组件, 而父亲和孙子看成是一个父子组件. 这样它们之间就可以进行通信了. 通过父亲组件合格桥梁, 可以实现爷孙的通信. (注意: 爷孙组件是无法直接通信的)

兄弟组件通信

兄弟组件通信即组件之间通信. 这就要用到观察者模式了. 因为vue实例的原型全部来自Vue.prototype. 那么我们就可以了将事件中心绑定到Vue.prototype的某个属性上, 暂且叫它为bus吧.

let bus = new Vue()

Vue.prototype.bus = bus

我们再定义两个组件, up组件和down组件, 当点击down组件中的按钮时, 会给up组件传递信息.

Vue.component('up', {
 data() {
  return {
   msg: '未传递消息'
  }
 },
 template: `
  <div class="up">
   <p>这是up组件, 下一行为down传递的消息</p>
   <p>{{msg}}</p>
  </div>
 `,
 mounted() {
  this.bus.$on('send', (msg)=> {
   this.msg = (msg)
  })
 }
})

Vue.component('down', {
 template: `
  <div class="down">
   <p>这是down</p>
   <button @click="toUp">点击我向up组件传递消息</button>
  </div>
 `,
 methods: {
  toUp() {
   this.bus.$emit('send', 'down来消息了')
  }
 }
})
new Vue({
 el: '#app',
})

并且将两个组件放入名为app的实例中

<div id="app">
  <up></up>
  <down></down>
 </div>

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

按钮被点击后, up组件会接收到消息

vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)

点击这里查看源代码

以上这篇vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米