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組件props傳值對(duì)象獲取不到的問(wèn)題
這篇文章主要介紹了vue組件props傳值,對(duì)象獲取不到的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-06-06
vue+electron實(shí)現(xiàn)創(chuàng)建多窗口及窗口間的通信(實(shí)施方案)
這篇文章主要介紹了vue+electron實(shí)現(xiàn)創(chuàng)建多窗口及窗口間的通信,本文給大家分享實(shí)施方案結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2022-09-09
使用vue完成微信公眾號(hào)網(wǎng)頁(yè)小記(推薦)
公司最近有一個(gè)H5頁(yè)面的功能，比較簡(jiǎn)單的一個(gè)調(diào)查表功能，嵌套在我們微信公眾號(hào)里面。這篇文章主要介紹了使用vue完成微信公眾號(hào)網(wǎng)頁(yè)小記,需要的朋友可以參考下
2019-04-04
electron踩坑之remote of undefined的解決
這篇文章主要介紹了electron踩坑之remote of undefined的解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
解決vue2.0 element-ui中el-upload的before-upload方法返回false時(shí)submit(
這篇文章主要介紹了vue2.0 element-ui中el-upload的before-upload方法返回false時(shí)submit()不生效的解決方法，這里需要主要項(xiàng)目中用的element-ui是V1.4.3，感興趣的朋友參考下吧
2018-08-08
跟混亂的頁(yè)面彈窗說(shuō)再見(jiàn)
這篇文章主要介紹了跟混亂的頁(yè)面彈窗說(shuō)再見(jiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
vue使用原生js創(chuàng)建元素樣式不生效問(wèn)題及解決
這篇文章主要介紹了vue使用原生js創(chuàng)建元素樣式不生效問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽(tīng)bug
這篇文章主要介紹了關(guān)于vue-socket.io使用及版本原因消息無(wú)法監(jiān)聽(tīng)bug，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了vue動(dòng)態(tài)組件實(shí)現(xiàn)選項(xiàng)卡切換效果的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-03-03
基于Vue3文件拖拽上傳功能實(shí)現(xiàn)
這篇文章主要介紹了Vue3文件拖拽上傳功能,支持拖拽到此區(qū)域上傳，支持選擇多個(gè)文件/文件夾，代碼很簡(jiǎn)單，對(duì)vue3拖拽上傳功能感興趣的朋友一起看看吧
2022-10-10