Vue.js中兄弟組件之間互相傳值實(shí)例

更新時(shí)間：2017年06月01日 15:38:56 作者：小碼過(guò)河找八哥

本篇文章主要介紹了Vue.js中兄弟組件之間互相傳值實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

兄弟組件之間互相傳值，需要建立一個(gè)“中轉(zhuǎn)站”（新的vue實(shí)例），并且需要主動(dòng)觸發(fā)。

實(shí)例上的$on方法來(lái)接受監(jiān)聽(tīng)。

<!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'>點(diǎn)擊</button></h1>
 </template>
 <template id="c2">
 <h3>~~~~~~我是弟弟~~~~{{msg2}}</h3>
 </template>
</body>
</html>
<script>
 var Hub=new Vue();  // 1) 中轉(zhuǎn)站,其中不需要設(shè)置任何參數(shù)

 var vm=new Vue({
 el: '#box',
 components:{
  child1:{
  template:'#c1',
  data:function(){
   return {
   msg: 'hello'
   }
  },
  methods:{
   fn:function(){
   // 2) 主動(dòng)觸發(fā)監(jiān)聽(tīng)(中轉(zhuǎn)站觸發(fā)監(jiān)聽(tīng))
   console.log(this.msg); //hello
   Hub.$emit('change',this.msg) //$emit觸發(fā)監(jiān)聽(tīng)方法
   }
  }
  },
  child2:{
  template:'#c2',
  data:function(){
   return {
   msg2: 'world'
   }
  },
  // 創(chuàng)建完成  new Vue  create mount
  // 鉤子函數(shù)
  created(){
   // 3) 接收監(jiān)聽(tīng)  $on('事件名稱(chēng)',function(val){}) val是傳遞過(guò)來(lái)的值
   Hub.$on('change',function(val){
   console.log(val) //hello
   // this.msg2 = val;
   })
  }
  }
  
 }
 })
</script>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

一文解決vue2 element el-table自適應(yīng)高度問(wèn)題
在寫(xiě)公司后臺(tái)項(xiàng)目的時(shí)候遇到一個(gè)需求,要求表格頁(yè)面不能有滾動(dòng)條,所以必須封裝一個(gè)公共方法來(lái)實(shí)現(xiàn)表格自適應(yīng)高度,本問(wèn)小編給大家介紹了如何解決vue2 element el-table自適應(yīng)高度問(wèn)題,需要的朋友可以參考下
2023-11-11
前端vue中實(shí)現(xiàn)文件下載的幾種方法總結(jié)
這篇文章主要介紹了前端vue中實(shí)現(xiàn)文件下載的幾種方法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
vue全局引入公共的scss和@mixin與@include的使用方式
這篇文章主要介紹了vue全局引入公共的scss和@mixin與@include的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊
這篇文章主要介紹了Vue在H5 項(xiàng)目中使用融云進(jìn)行實(shí)時(shí)個(gè)人單聊通訊,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-12-12
vue如何自定義地址設(shè)置@
這篇文章主要介紹了vue如何自定義地址設(shè)置@，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
vue項(xiàng)目部署跨域問(wèn)題的詳細(xì)解決過(guò)程
一般我們的前端Vue項(xiàng)目中都會(huì)涉及到跨域的問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目部署跨域問(wèn)題的詳細(xì)解決過(guò)程,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-05-05
vue v-for 點(diǎn)擊當(dāng)前行,獲取當(dāng)前行數(shù)據(jù)及event當(dāng)前事件對(duì)象的操作
這篇文章主要介紹了vue v-for 點(diǎn)擊當(dāng)前行,獲取當(dāng)前行數(shù)據(jù)及event當(dāng)前事件對(duì)象的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-09-09
vue 詳情跳轉(zhuǎn)至列表頁(yè)實(shí)現(xiàn)列表頁(yè)緩存
這篇文章主要介紹了vue 詳情跳轉(zhuǎn)至列表頁(yè)實(shí)現(xiàn)列表頁(yè)緩存，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
詳解vue頁(yè)面首次加載緩慢原因及解決方案
這篇文章主要介紹了詳解vue頁(yè)面首次加載緩慢原因及解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
ant design vue中日期選擇框混合時(shí)間選擇器的用法說(shuō)明
這篇文章主要介紹了ant design vue中日期選擇框混合時(shí)間選擇器的用法說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10