vue組件之間通信實錄

李昌杰發布于2019-08-20 16:46 / 522人閱讀

摘要：一般在的開發中都是模塊化開發，所以當涉及到兄弟組件之間的通信的時候，我們可以在入口文件中事先聲明一個全局的事件巴士即一個全局的供實例，然后通過他來傳導數據。

1、在vue中父組件是通過props傳遞數據給子組件

子組件只接受在子組件中定義過的props的值，

Vue.component("child-component", {
  props: ["prop1", "prop2"], // 定義接收哪些 props
  template: "{{prop1 + prop2}}",
  ...
}

2、父組件調用子組件屬性或方法
首先在組件的根元素上通過ref給取個名字，例如：

然后父組件就可以通過該名稱獲取到這個組件對象，從而調用里面的屬性與方法：

var comp = this.$refs.name;
name.attr;
name.method();

父組件可以通過$children，獲取到所有的直接子組件，不包括孫組件；不保證順序，不是響應式的

3、子組件傳遞數據給父組件----自定義事件
父組件通過v-on在子組件使用的地方監聽子組件觸發的事件：


  {{ total }}
//increment是子組件中的事件，意思就是在子組件中increment執行的時候，執行父組件中的incrementTotal方法
  
  

new Vue({
  el: "#counter-event-example",
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function (arg) {
      this.total += 1
    }
  }
})

然后在子組件中使用$emit()主動拋出事件：

Vue.component("button-counter", {
  template: "",
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit("increment")
       //傳遞參數
       //this.$emit("increment",arg) 
    }
  },
})

當然如果你想在組件根元素上使用原生事件，可以使用.native修飾符
另外子組件調用父組件事件則可以使用$parent或者$root，詳見vue文檔；

4、兄弟組件之間通信

vue中兄弟組件之間的通信網上大部分說法都是使用vuex，但是對于小白來說，vuex的初始理解門檻還是有的，所以這里主要用事件巴士講解一下。

一般在vue的開發中都是模塊化開發，所以當涉及到兄弟組件之間的通信的時候，我們可以在入口文件中事先聲明一個全局的事件巴士（即一個全局的供vue實例），然后通過他來傳導數據。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import FastClick from "fastclick";
import router from "./router";
import Vue_resource from "vue-resource";
import axios from "axios";
import "./common/style/index.less";
Vue.config.productionTip = false;
FastClick.attach(document.body);
Vue.prototype.$http = axios;
/* eslint-disable no-new */
new Vue({
    el: "#app",
    router,
    render: h => h(App),
    data: {
        eventHub: new Vue()
    }
});
router.push("/goods");

然后便可以全局的使用該實例，進行數據的傳輸，如下：

//在組件a中觸發事件add，并且傳遞參數1
this.$root.eventHub.$emit("add",1);
//在組件b中監聽事件的觸發，并處理參數
this.$root.eventHub.$on("add",function(data) {
  //...
})

云服務器 GPU云服務器組件之間通信 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/83144.html

關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

khs1994 2019-08-23 18:08 評論0 收藏0
實錄分享|kubernetes 在騰訊游戲的應用實踐

摘要：大家好今天我分享的主題與游戲行業相關，為大家介紹的是在騰訊游戲中的應用實踐。隨著技術的興起，我們開始調研在游戲容器化方面的應用。也就是說，將不同游戲業務部署到同一臺母機，采用綁定核的方式。在母機上架部署時，創建設備和設備并將它們進行關聯。今天小數的推送內容來自騰訊互娛高級工程師黃惠波，讓我們一起來看看吧~~~ 黃惠波，騰訊互娛高級工程師目前主要負責游戲計算資源容器化平臺的研發工作，包...

DangoSky 2019-07-01 16:30 評論0 收藏0
vue中8種組件通信方式, 值得收藏!

摘要：一父組件通過的方式向子組件傳遞數據，而通過子組件可以向父組件通信。而且只讀，不可被修改，所有修改都會失效并警告。之前寫了一篇關于vue面試總結的文章, 有不少網友提出組件之間通信方式還有很多, 這篇文章便是專門總結組件之間通信的 vue是數據驅動視圖更新的框架, 所以對于vue來說組件間的數據通信非常重要，那么組件之間如何進行數據通信的呢？首先我們需要知道在vue中組件之間存在什么樣...

BicycleWarrior 2019-08-26 10:44 評論0 收藏0