欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2017年08月09日 08:33:01   作者：CooMark  
這篇文章主要為大家詳細介紹了vuejs父子組件之間的數(shù)據(jù)交互，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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

示例

子組件的點擊事件函數(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)聽事件

復(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ù)的傳遞是一個對象

其實還有更多的場景需要組件間通信

官方推薦的通信方式

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

相關(guān)文章

  • vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動效果

    vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動效果

    使用postgres（postgis）數(shù)據(jù)庫以及nodejs作為后臺,vue和openlayers做前端,openlayers使用http請求通過nodejs從postgres數(shù)據(jù)庫獲取數(shù)據(jù),這篇文章主要介紹了vue+openlayers+nodejs+postgis實現(xiàn)軌跡運動,需要的朋友可以參考下
    2024-05-05
  • vue實現(xiàn)一個單文件組件的完整過程記錄

    vue實現(xiàn)一個單文件組件的完整過程記錄

    整個項目結(jié)構(gòu)清晰,尤其單文件組件的表現(xiàn)力尤為突出,使得每個組件的邏輯都沒有過于復(fù)雜,所以這篇文章主要給大家介紹了關(guān)于vue實現(xiàn)一個單文件組件的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • Vue版本vue2.9.6升級到vue3.0的詳細步驟

    Vue版本vue2.9.6升級到vue3.0的詳細步驟

    vue版本升級相信大家應(yīng)該都遇到過,下面這篇文章主要給大家介紹了關(guān)于Vue版本vue2.9.6升級到vue3.0的詳細步驟,文中通過圖文介紹的非常詳細,需要的朋友可以參考下
    2022-09-09
  • vue中的虛擬dom知識點總結(jié)

    vue中的虛擬dom知識點總結(jié)

    這篇文章主要介紹了vue中的虛擬dom知識點總結(jié)，文章圍繞主題內(nèi)容展開詳細介紹，需要的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助
    2022-04-04
  • Element中Select選擇器的實現(xiàn)

    Element中Select選擇器的實現(xiàn)

    本文主要介紹了Element中Select選擇器的實現(xiàn)，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-03-03
  • electron-vite工具打包后如何通過內(nèi)置配置文件動態(tài)修改接口地址

    electron-vite工具打包后如何通過內(nèi)置配置文件動態(tài)修改接口地址

    使用electron-vite?工具開發(fā)項目打包完后每次要改接口地址都要重新打包,對于多環(huán)境切換或者頻繁變更接口地址就顯得麻煩,這篇文章主要介紹了electron-vite工具打包后通過內(nèi)置配置文件動態(tài)修改接口地址實現(xiàn)方法,需要的朋友可以參考下
    2024-05-05
  • vue.js+boostrap項目實踐(案例詳解)

    vue.js+boostrap項目實踐(案例詳解)

    這篇文章主要介紹了vue.js+boostrap項目實踐(案例詳解)的相關(guān)資料,本文圖文并茂介紹的非常詳細，具有參考借鑒價值，需要的朋友可以參考下
    2016-09-09
  • vue parseHTML函數(shù)源碼解析 AST預(yù)備知識

    vue parseHTML函數(shù)源碼解析 AST預(yù)備知識

    這篇文章主要為大家介紹了vue parseHTML函數(shù)源碼解析 AST預(yù)備知識示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2022-07-07
  • vue實現(xiàn)帶自動吸附功能的懸浮球

    vue實現(xiàn)帶自動吸附功能的懸浮球

    這篇文章主要為大家詳細介紹了vue實現(xiàn)帶自動吸附功能的懸浮球，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2022-04-04
  • vue實現(xiàn)批量下載文件

    vue實現(xiàn)批量下載文件

    這篇文章主要為大家詳細介紹了vue實現(xiàn)批量下載文件的方法（不走后端接口的方法）,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-12-12

最新評論