您好,登錄后才能下訂單哦!
這篇“vue中props可不可以傳遞函數(shù)”文章的知識點大部分人都不太理解,所以小編給大家總結(jié)了以下內(nèi)容,內(nèi)容詳細,步驟清晰,具有一定的借鑒價值,希望大家閱讀完這篇文章能有所收獲,下面我們一起來看看這篇“vue中props可不可以傳遞函數(shù)”文章吧。
vue中props可以傳遞函數(shù);vue中可以將字符串、數(shù)組、數(shù)字和對象作為props傳遞,props主要用于組件的傳值,目的為了接收外面?zhèn)鬟^來的數(shù)據(jù),語法為“export default {methods: {myFunction() {// ...}}};”。
本教程操作環(huán)境:windows10系統(tǒng)、Vue3版、Dell G3電腦。
Vue 新手經(jīng)常問的一個常見問題。可以將字符串、數(shù)組、數(shù)字和對象作為props
傳遞。但是你能把一個函數(shù)當作一個props
來傳遞嗎?
雖然可以將函數(shù)作為props
傳遞,但這種方式不好。相反,Vue 有一個專門為解決這問題而設(shè)計的功能,接下來,我們來看看。
獲取一個函數(shù)或方法并將其作為一個prop傳遞給子組件相對比較簡單。實際上,它與傳遞任何其他變量方式完全相同:
<template> <ChildComponent :function="myFunction" /> </template> export default { methods: { myFunction() { // ... } } };
正如前面所說,在Vue中永遠都不要做這樣的事情。
為什么?Vue有更好的東西。
如果使用過 React,就會習(xí)慣傳遞函數(shù)方式。
在React中,我們可以將一個函數(shù)從父組件傳遞給子組件,以便子組件能夠向上與父組件通信。props 和 data 向下流動,函數(shù)調(diào)用向上流動。
然而,Vue有一種不同的機制來實現(xiàn)子到父通信方式,Vue 使用事件。
這與 DOM 的工作方式相同-與React相比,Vue 的方式與瀏覽器的一致性更高。元素可以發(fā)出事件,并且可以監(jiān)聽這些事件。
因此,盡管在Vue中可以把函數(shù)作為prop傳遞,但它被認為是一種反模式。
事件是我們與 Vue 中的父組件通信的方式。
這里有一個簡短的例子來說明事件是如何工作的。
首先,我們將創(chuàng)建子組件,該子組件在創(chuàng)建時會發(fā)出一個事件:
// ChildComponent export default { created() { this.$emit('created'); } }
在父組件中,我們監(jiān)聽該事件:
<template> <ChildComponent @created="handleCreate" /> </template> export default { methods: { handleCreate() { console.log('Child has been created.'); } } };
事件可以做的事情還有很多,而這僅僅是皮毛。強烈建議查看官方的Vue文檔來了解更多關(guān)信息,絕對值得一讀。
但是事件并不能完全解決我們所有的問題。
在許多情況下,我們試圖解決的問題是訪問來自不同作用域的數(shù)據(jù)。
父組件有一個作用域,子組件有另一個作用域。
通常,我們希望從父組件訪問子組件中的值,或者從子組件訪問父組件中的值。Vue阻止我們直接這樣做,這是一件好事。
它使我們的組件更加具有封裝性,并提高了它們的可重用性。這使我們的代碼更簡潔,并從長遠來看避免了許多令人頭痛的問題。
但是有時候我們可能會試圖通過函數(shù)來繞過這個問題。
「從父類獲取值」
如果希望子組件訪問父組件的方法,那么將方法直接作為 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(); } }
這樣做會有什么問題?
這并不是完全錯誤的,但是在這種情況下使用事件會更好。
然后,當需要時,子組件不會調(diào)用該函數(shù),而只是發(fā)出一個事件。然后父組件將接收該事件,調(diào)用該函數(shù),拼裝將更新傳遞給子組件的 prop。
這是達到同樣效果的更好的方法。
在其他情況下,我們可能想要從子元素中獲取一個值到父元素中,我們?yōu)榇耸褂昧撕瘮?shù)。
例如,你可能正在這樣做。父函數(shù)接受子函數(shù)的值并對其進行處理:
<!-- Parent --> <template> <ChildComponent :method="parentMethod" /> </template> // Parent export default { methods: { parentMethod(valueFromChild) { // Do something with the value console.log('From the child:', valueFromChild); } } }
在子組件中調(diào)用傳入的方法并將子組件的值作為方法的參數(shù)傳入:
// 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中的最佳方式。相反,事件更適合解決這個問題。我們可以使用事件來實現(xiàn)完全相同的事情
<!-- 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); } } }
在子組件中,我們發(fā)出事件:
// 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提供的最強大的功能之一。
它們?nèi)趸俗幼饔糜蚝透缸饔糜蛑g的界限。但是它以一種非常干凈的方式完成,使得我們的組件像以前一樣可組合。
如果你想了解更多關(guān)于作用域插槽是如何工作的,可以先看看官方文檔,或者我們下回講解。
以上就是關(guān)于“vue中props可不可以傳遞函數(shù)”這篇文章的內(nèi)容,相信大家都有了一定的了解,希望小編分享的內(nèi)容對大家有幫助,若想了解更多相關(guān)的知識內(nèi)容,請關(guān)注億速云行業(yè)資訊頻道。
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。