我正在學習 Vue 并試圖測驗如何將用戶輸入從一個函式傳遞到另一個函式。
我的用例是這樣的。我想獲取用戶輸入，存盤它，然后將它作為變數提供給第二個函式，它可以用來進行 API 呼叫。
孤立的兩個代碼部分是：
用戶輸入
<div id="v-model-basic" class="demo">
<input v-model="message" placeholder="edit me" />
<p>Message is: {{ message }}</p>
</div>
Vue.createApp({
data() {
return {
message: ''
}
}
}).mount('#v-model-basic')
API呼叫
import axios from 'axios';
/* API call for the weather data */
export default {
name: "Weather",
data() {
return {
weatherList: []
};
},
methods: {
getweatherData() {
axios.get("https://anAPIpath.com/that-I-want-to-add-user-input-to").then(response => (this.weatherList = response.data));
}
}
};
有沒有辦法在 Vue 中做到這一點，它們都是該匯出函式中的方法，還是只是錯誤的方法？如前所述，新的和正在學習的 Vue 和我想確保我以“Vue 方式”來處理這個問題，所以事情盡可能的整潔。
uj5u.com熱心網友回復：
Vue 有多種在組件之間傳遞變數的選項。
props
您可以使變數成為另一個的道具：
props: {
message: String
}
該道具是通過訪問的，this.message但建議您將其復制到一個變數 indata并反映更改$emit（請參閱檔案鏈接和$emit下面的部分）。
查看檔案：https : //v3.vuejs.org/guide/component-props.html#props
$emit
你可以讓一個父組件知道另一個組件的變化$emit。您可以自己命名一個事件并將該值作為第一個引數傳遞。
this.$emit('messageUpdate', this.message);
查看檔案：https : //v3.vuejs.org/guide/migration/emits-option.html#emits-option
VueX
使用 VueX 資料存盤，您可以將變數從應用程式中的任何組件傳輸到任何其他組件。
這需要更多的技巧來設定。我建議先用上面的。
如果你有興趣（絕對值得學習），這里是鏈接：https :
//vuex.vuejs.org/guide/#getting-started
uj5u.com熱心網友回復：
我看到您做得很好，您只需要將 API 呼叫添加到同一檔案中的腳本標記，然后像這樣訪問輸入訊息：
axios.get("https://anAPIpath.com/" this.message)
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/360024.html
標籤：javascript Vue.js
下一篇：單擊時更改HTML