vuejs中怎么實現父子組件間數據交互

今天就跟大家聊聊有關vuejs中怎么實現父子組件間數據交互，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

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

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,允許組件自由交流

• 具體可見：$dispatch 和 $broadcast替換

看完上述內容，你們對vuejs中怎么實現父子組件間數據交互有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。