vuejs父子組件之間數(shù)據(jù)交互詳解

更新時(shí)間：2017年08月09日 08:33:01 作者：CooMark

這篇文章主要為大家詳細(xì)介紹了vuejs父子組件之間的數(shù)據(jù)交互，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

父子組件之間的數(shù)據(jù)交互遵循：

props down - 子組件通過(guò)props接受父組件的數(shù)據(jù)
events up - 父組件監(jiān)聽(tīng)子組件$emit的事件來(lái)操作數(shù)據(jù)

示例

子組件的點(diǎn)擊事件函數(shù)中$emit自定義事件

export default {
 name: 'comment',
 props: ['issue','index'],
 data () {
 return {
  comment: '',
 }
 },
 components: {},
 methods: {
 removeComment: function(index,cindex) {
  this.$emit('removeComment', {index:index, cindex:cindex});
 },
 saveComment: function(index) {
  this.$emit('saveComment', {index: index, comment: this.comment});
  this.comment="";
 }
 },
 //hook 
 created: function () {
 //get init data

 }

}

父組件監(jiān)聽(tīng)事件

復(fù)制代碼代碼如下:

<comment v-show="issue.show_comments" :issue="issue" :index="index" @removeComment="removeComment" @saveComment="saveComment"></comment>

父組件的methods中定義了事件處理程序

 removeComment: function(data) {
  var index = data.index, cindex = data.cindex;
  var issue = this.issue_list[index];
  var comment = issue.comments[cindex];
  axios.get('comment/delete/cid/'+comment.cid)
  .then(function (resp) {
  issue.comments.splice(cindex,1);
  });
 },
 saveComment: function(data) {
  var index = data.index;
  var comment = data.comment;
  var that = this;
  var issue =that.issue_list[index];
  var data = {
  iid: issue.issue_id,
  content: comment
  };

  axios.post('comment/save/',data)
  .then(function (resp) {
  issue.comments=issue.comments||[];
  issue.comments.push({
   cid: resp.data,
   content: comment
  });
  });
  
  //clear comment input
  this.comment="";
 }

 },

注意參數(shù)的傳遞是一個(gè)對(duì)象

其實(shí)還有更多的場(chǎng)景需要組件間通信

官方推薦的通信方式

首選使用Vuex
使用事件總線:eventBus,允許組件自由交流
具體可見(jiàn)：$dispatch 和 $broadcast替換

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

您可能感興趣的文章:

相關(guān)文章

vue+openlayers+nodejs+postgis實(shí)現(xiàn)軌跡運(yùn)動(dòng)效果
使用postgres（postgis）數(shù)據(jù)庫(kù)以及nodejs作為后臺(tái),vue和openlayers做前端,openlayers使用http請(qǐng)求通過(guò)nodejs從postgres數(shù)據(jù)庫(kù)獲取數(shù)據(jù),這篇文章主要介紹了vue+openlayers+nodejs+postgis實(shí)現(xiàn)軌跡運(yùn)動(dòng),需要的朋友可以參考下
2024-05-05
vue實(shí)現(xiàn)一個(gè)單文件組件的完整過(guò)程記錄
整個(gè)項(xiàng)目結(jié)構(gòu)清晰,尤其單文件組件的表現(xiàn)力尤為突出,使得每個(gè)組件的邏輯都沒(méi)有過(guò)于復(fù)雜,所以這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)一個(gè)單文件組件的相關(guān)資料,需要的朋友可以參考下
2021-06-06
Vue版本vue2.9.6升級(jí)到vue3.0的詳細(xì)步驟
vue版本升級(jí)相信大家應(yīng)該都遇到過(guò),下面這篇文章主要給大家介紹了關(guān)于Vue版本vue2.9.6升級(jí)到vue3.0的詳細(xì)步驟,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
vue中的虛擬dom知識(shí)點(diǎn)總結(jié)
這篇文章主要介紹了vue中的虛擬dom知識(shí)點(diǎn)總結(jié)，文章圍繞主題內(nèi)容展開(kāi)詳細(xì)介紹，需要的小伙伴可以參考一下，希望對(duì)你的學(xué)習(xí)有所幫助
2022-04-04
Element中Select選擇器的實(shí)現(xiàn)
本文主要介紹了Element中Select選擇器的實(shí)現(xiàn)，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
electron-vite工具打包后如何通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址
使用electron-vite?工具開(kāi)發(fā)項(xiàng)目打包完后每次要改接口地址都要重新打包,對(duì)于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過(guò)內(nèi)置配置文件動(dòng)態(tài)修改接口地址實(shí)現(xiàn)方法,需要的朋友可以參考下
2024-05-05
vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)
這篇文章主要介紹了vue.js+boostrap項(xiàng)目實(shí)踐(案例詳解)的相關(guān)資料,本文圖文并茂介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-09-09
vue parseHTML函數(shù)源碼解析 AST預(yù)備知識(shí)
這篇文章主要為大家介紹了vue parseHTML函數(shù)源碼解析 AST預(yù)備知識(shí)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-07-07
vue實(shí)現(xiàn)帶自動(dòng)吸附功能的懸浮球
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶自動(dòng)吸附功能的懸浮球，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
vue實(shí)現(xiàn)批量下載文件
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)批量下載文件的方法（不走后端接口的方法）,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2023-12-12