在Vue 中,可以使用 props 向子元件傳遞資料，下面這篇文章主要給大家介紹了關於vue父元件通過props如何向子元件傳遞方法的相關資料，文中通過示例程式碼介紹的非常詳細，需要的朋友可以參考借鑑，下面來一起看看吧。

vue 元件中的 this
vue 中 data/computed/methods 中 this的上下文是vue例項,需注意。

例如：
注意：不應該對 data 屬性使用箭頭函式 (例如data: () => { return { a: this.myProp }} ) 。理由是箭頭函式綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 例項，this.myProp 將是 undefined

父元件通過props向子元件傳遞方法
父元件呼叫子元件，通過繫結callback屬性，將方法傳給子元件：

App.vue 
 
<search-bar class="f-fr" placeholder="輸入名字" mutationName='resetListData' :callback="callback"/>

子元件通過props獲取父元件傳過來的callback方法：

SearchBar.vue
 
export default {
 name: 'SearchBar',
 data() {
  return {
   input: ''
  }
 },
 methods: {
  setName: function () {
   var input = this.input;
   if (input.trim() == '') {
    alert("empty");
   }
   else {
    Api.searchTest(this.input,this.success );
   }//歡迎加入全棧開發交流圈一起學習交流：864305860
   },//面向1-3年前端人員
  success(responseData) {//幫助突破技術瓶頸，提升思維能力
   this.callback(responseData);
  },
 },
 props: ['placeholder', 'apiName', 'moduleName', 'mutationName','callback']
}

 

通過 data

export default {
 ...
 data:function() {
 return {
  callback:function(responseData) {
  this.$store.commit('resetListData', responseData);
  }
 }
 },
 ...
};

此處callback以函式物件的方式，傳入子元件，子元件呼叫的時候，this指向子元件
通過 methods

export default {
 ...
 methods: {
 callback(responseData) {
  this.$store.commit('resetListData', responseData);
 }
 }
};
 

此處callback是父元件的一個方法，個人理解，當父元件初始化時，該方法的this上下文就綁定了父元件的例項，因此當子元件呼叫callback 方法時，this指向父元件。

本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。