首頁  >  文章  >  web前端  >  vue中props可以傳遞函數嗎

vue中props可以傳遞函數嗎

WBOY
WBOY原創
2022-06-16 10:39:067789瀏覽

vue中props可以傳遞函數;vue中可以將字串、數組、數字和物件作為props傳遞,props主要用於組件的傳值,目的為了接收外面傳過來的數據,語法為“ export default {methods: {myFunction() {// ...}}};」。

vue中props可以傳遞函數嗎

本教學操作環境:windows10系統、Vue3版、Dell G3電腦。

vue中props傳遞函數

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(&#39;created&#39;);
  }
}

在父元件中,我們監聽該事件:

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

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

事件可以做的事情還有很多,而這只是皮毛。強烈建議查看官方的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(&#39;From the child:&#39;, valueFromChild);
    }
  }
}

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

// Child
export default {
  props: {
    method: { type: Function },
  },
  data() {
    return { value: &#39;I am the child.&#39; };
  },
  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(&#39;From the child:&#39;, value);
    }
  }
}

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

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

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

為此,我們使用作用域插槽!

使用作用域插槽

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

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

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

【相關推薦:《vue.js教學》】

以上是vue中props可以傳遞函數嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn