範例:
(我簡單打一下,敘述我的問題重點,有問題莫怪)
(我的專案是Vue+JS)
<button @click="status?isShowPassword=true:doSomething()">
DoSomething
</button>
<Password
v-if="isShowPassword"
@cancel="cancelPassword"
></Password>
<script>
export default {
components: {
Password,
}
data() {
status: true,
isShowPassword: false,
},
methods: {
doSomething: function () {
console.log("doSomthing")
},
cancelPassword: function (passStatus) {
this.isShowPassword = false;
if (passStatus) {
this.doSomething();
}
}
}
}
</script>
解釋一下
這段主要是一顆按鈕
按下後
status是判斷權限用
當false跳過輸入密碼的階段,直接執行doSomething
當true則跳出設計好的Password Component
並輸入密碼
這邊密碼通過與否都會透過cancelPassword回傳狀態
當回傳為密碼成功(true)
則會執行那顆安扭原本應該執行的function(doSomething)
我的問題是
我的類似的按鈕不只一顆
而且要執行的function也不見得一樣
有些function也有可能傳遞一些參數
不同於上面的範例是丟空參數
例如:
<button @click="status?isShowPassword=true:doSomething()">
DoSomething
</button>
<button @click="status?isShowPassword=true:showMyName('My name is Jhon')">
ShowMyName
</button>
<Password
v-if="isShowPassword"
@cancel="cancelPassword"
></Password>
<script>
export default {
components: {
Password,
}
data() {
status: true,
isShowPassword: false,
},
methods: {
doSomething: function () {
console.log("doSomthing")
},
showMyName: function (name) {
console.log(name)
},
cancelPassword: function (passStatus) {
this.isShowPassword = false;
if (passStatus) {
//this.doSomething();
//this.showMyName('My name is Jhon');
//這邊不能寫死
}
}
}
}
</script>
問題在於這些按鈕共用這個component
我想到的解法是
能不能在我按鈕判斷那一行
status?isShowPassword=true:doSomething()
isShowPasswowrd=true後面加上一段
用某個變數紀錄我這個按鈕要執行的function包含其參數
例如
isShowPasswowrd=true;
dofunction=showMyName('My name is Jhon');
好讓我在cancelPassword這個function
在判斷密碼通過後
直接執行這個變數就好
if (passStatus) {
//this.doSomething();
//this.showMyName('My name is Jhon');
this.dofunction;
}
當然
我知道上面這個寫法是錯的...=.=
想詢問板上的高手們
是不是有什麼類似的方法或是其他解法
用某個變數紀錄我這個按鈕要執行的function包含其參數
其實是可以的,可以用變數儲存要執行的函數,並傳入儲存的變數。
https://codesandbox.io/s/jovial-dirac-cyyi8?file=/src/App.vue:0-1419
this[fnName](...parameter);
<template>
<div id="app">
<button @click="($event) => buttonHandler($event, 'buttonFn01')">
button 01
</button>
<button
@click="
($event) => buttonHandler($event, 'buttonFn02', 'My Name is Jeff', 'p2')
"
>
button 02
</button>
<password-box
v-if="passwordBox.isShowPassword"
@OnOK="PasswordOnOk"
></password-box>
</div>
</template>
<script>
import PasswordBox from "/src/components/PasswordBox.vue";
export default {
name: "App",
components: {
PasswordBox,
},
data() {
return {
passwordBox: {
isShowPassword: false,
status: false,
},
fnHandler: {
fnName: "",
parameter: [],
},
};
},
methods: {
buttonHandler(event, fnName, ...parameter) {
if (this.passwordBox.status === false) {
this.fnHandler.fnName = fnName;
this.fnHandler.parameter = parameter;
this.passwordBox.isShowPassword = true;
} else {
this[fnName](...parameter);
}
},
PasswordOnOk() {
this.passwordBox.status = true;
this.passwordBox.isShowPassword = false;
this[this.fnHandler.fnName](...this.fnHandler.parameter);
},
buttonFn01() {
alert("This is buttonFn01");
},
buttonFn02(parameter, parameter2) {
alert(parameter);
alert(parameter2);
},
},
};
</script>
<style>
</style>
在javascript裏。
是可以將函式丟給變數的。
只是沒辦法儲存要傳入的變數。
正常來說,也比較沒人會像這這樣幹就是了。
大多數就是將要儲存的變數用個全域或半域的變數來處理。
則在呼叫函式時直接帶入該變數來處理。
還有一種寫法是叫臨時性函式應用。
如
func1 = function(){};
這大多數是為了特殊處理或是callback應用居多。
你也可以往這方面去想。
我是有另一個方法可以解決
就是呼叫Component的時候丟個參數或字串給他
告訴這個Component
等等我要執行一個function
例如我丟字串showMyName
等Component做完他的事後
除了回傳密碼通過狀態
同時回傳我剛剛給他的showMyName
最後
我在我接到回傳參數的function
寫switch判斷接到什麼參數就case什麼function
只是這樣的維護會有點不優
如果同一頁面有10個這樣的功能要接
switch會很長
又如果另一個頁面有同樣的事情要做
但功能命名又都不一樣
於是
這段switch不僅長
複製後,還得大改一番
再包一層就好了。或是將常用的動作給物件化處理也是一招。
用 Property accessors 是可以做到呼叫存在變數的函數並傳入儲存的參數