Vue 中，如何將函式作為 props 傳遞給元件

前端小智發表於2022-12-19
Vue函式元件
微信搜尋 【大遷世界】, 我會第一時間和你分享前端行業趨勢，學習途徑等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

Vue 新手經常問的一個常見問題。可以將字串、陣列、數字和物件作為props傳遞。但是你能把一個函式當作一個props來傳遞嗎?

雖然可以將函式作為props傳遞，但這種方式不好。相反，Vue 有一個專門為解決這問題而設計的功能，接下來，我們來看看。

向元件傳入函式

獲取一個函式或方法並將其作為一個prop傳遞給子元件相對比較簡單。實際上，它與傳遞任何其他變數方式完全相同：

<template>
  <ChildComponent :function="myFunction" />
</template>

export default {
  methods: {
    myFunction() {
      // ...
    }
  }
};

正如前面所說，在Vue中永遠都不要做這樣的事情。

為什麼？Vue有更好的東西。

大家都說簡歷沒專案寫，我就幫大家找了一個專案，還附贈【搭建教程】。

React vs Vue

如果使用過 React，就會習慣傳遞函式方式。

在React中，我們可以將一個函式從父元件傳遞給子元件，以便子元件能夠向上與父元件通訊。props 和 data 向下流動，函式呼叫向上流動。

然而，Vue有一種不同的機制來實現子到父通訊方式，Vue 使用事件。

這與 DOM 的工作方式相同-與React相比，Vue 的方式與瀏覽器的一致性更高。 元素可以發出事件，並且可以監聽這些事件。

因此，儘管在Vue中可以把函式作為prop傳遞，但它被認為是一種反模式。

使用事件

事件是我們與 Vue 中的父元件通訊的方式。

這裡有一個簡短的例子來說明事件是如何工作的。

首先，我們將建立子元件，該子元件在建立時會發出一個事件：

// ChildComponent
export default {
  created() {
    this.$emit('created');
  }
}

在父元件中，我們監聽該事件：

<template>
  <ChildComponent @created="handleCreate" />
</template>

export default {
  methods: {
    handleCreate() {
      console.log('Child has been created.');
    }
  }
};

事件可以做的事情還有很多，而這僅僅是皮毛。強烈建議檢視官方的Vue文件來了解更多關資訊，絕對值得一讀。

但是事件並不能完全解決我們所有的問題。

從子元件訪問父元件的作用域裡資料

在許多情況下，我們試圖解決的問題是訪問來自不同作用域的資料。

父元件有一個作用域，子元件有另一個作用域。

通常，我們希望從父元件訪問子元件中的值，或者從子元件訪問父元件中的值。Vue阻止我們直接這樣做，這是一件好事。

它使我們的元件更加具有封裝性，並提高了它們的可重用性。這使我們的程式碼更簡潔，並從長遠來看避免了許多令人頭痛的問題。

但是有時候我們可能會試圖透過函式來繞過這個問題。

從父類獲取值

如果希望子元件訪問父元件的方法，那麼將方法直接作為 prop 傳遞似乎簡單明瞭。

在父元件中我們會這樣做：

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>

// Parent
export default {
  methods: {
    parentMethod() {
      // ...
    }
  }
}

在我們的子元件中，使用傳入的方法：

// Child
export default {
  props: {
    method: { type: Function },
  },
  mounted() {
    // Use the parent function directly here
    this.method();
  }
}

這樣做會有什麼問題？

這並不是完全錯誤的，但是在這種情況下使用事件會更好。

然後，當需要時，子元件不會呼叫該函式，而只是發出一個事件。然後父元件將接收該事件，呼叫該函式，拼裝將更新傳遞給子元件的 prop。

這是達到同樣效果的更好的方法。

在其他情況下，我們可能想要從子元素中獲取一個值到父元素中，我們為此使用了函式。

例如，你可能正在這樣做。父函式接受子函式的值並對其進行處理：

<!-- Parent -->
<template>
  <ChildComponent :method="parentMethod" />
</template>


// Parent
export default {
  methods: {
    parentMethod(valueFromChild) {
      // Do something with the value
      console.log('From the child:', valueFromChild);
    }
  }
}

在子元件中呼叫傳入的方法並將子元件的值作為方法的引數傳入：

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: 'I am the child.' };
  },
  mounted() {
    // Pass a value to the parent through the function
    this.method(this.value);
  }
}

這也不是完全錯誤的，這樣做是可行的。

只是這不是在Vue中的最佳方式。相反，事件更適合解決這個問題。我們可以使用事件來實現完全相同的事情

<!-- Parent -->
<template>
  <ChildComponent @send-message="handleSendMessage" />
</template>

// Parent
export default {
  methods: {
    handleSendMessage(event, value) {
      // Our event handler gets the event, as well as any
      // arguments the child passes to the event
      console.log('From the child:', value);
    }
  }
}

在子元件中，我們發出事件:

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: 'I am the child.' };
  },
  mounted() {
    // Instead of calling the method we emit an event
    this.$emit('send-message', this.value);
  }
}

事件在Vue中非常有用，但它們也不能100%地解決我們的問題。有時，我們需要以不同的方式從父級訪問子級的作用域。

為此，我們使用作用域插槽！

使用作用域插槽

作用域插槽是一個更高階的主題，但是它們也非常有用。事實上，我認為它們是Vue提供的最強大的功能之一。

它們弱化了子作用域和父作用域之間的界限。但是它以一種非常乾淨的方式完成，使得我們的元件像以前一樣可組合。

如果你想了解更多關於作用域插槽是如何工作的，可以先看看官方文件，或者我們下回講解。

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

來源：https://stackoverflow.com/que...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章