vue實現父子組件間數據交互的方式是什么

本文小編為大家詳細介紹“vue實現父子組件間數據交互的方式是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue實現父子組件間數據交互的方式是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

父子組件之間的數據交互遵循：

props down - 子組件通過props接受父組件的數據
events up - 父組件監聽子組件$emit的事件來操作數據

示例

子組件的點擊事件函數中$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

 }

}

父組件監聽事件

復制代碼 代碼如下:

<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="";
 }

 },

注意參數的傳遞是一個對象

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

官方推薦的通信方式

• 首選使用Vuex

• 使用事件總線:eventBus,允許組件自由交流

vue是什么

Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。

讀到這里，這篇“vue實現父子組件間數據交互的方式是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。