<template>
?? ?<p>{{ getCallerName }}</p>
?</template>
<script>
export default {
?? ?props: {
?? ??? ?callRecord: {
?? ??? ??? ?type: Object,
? ? ? ? ? ? default: () => ({}),
? ? ? ? }
?? ?},
?? ?computed:{
?? ??? ?// 獲取名稱
? ? ? ? getCallerName() {
? ? ? ? ?? ?return 'callerName'
? ? ? ? },
?? ?}
}

這個(gè)示例，我們接收一個(gè)從父組件傳過來的屬性值 callRecord，對(duì)象類型

需求：我們需要根據(jù)接收值中的type字段，去判斷應(yīng)該解析名稱為“主叫名稱”還是“被叫名稱”

因?yàn)橛?jì)算屬性具有緩存效果，所以我們期望用計(jì)算屬性去獲取（當(dāng)然，過濾器也能使用，方法有很多，這里不用較真）

所以，這里我們就要想辦法把我們的值當(dāng)做參數(shù)傳進(jìn)去。

官網(wǎng)并沒解釋計(jì)算屬性應(yīng)該怎么傳值，但是呢，計(jì)算屬性都會(huì)返回一個(gè)值，基于這個(gè)條件，我們就想到了另一個(gè)只知識(shí)點(diǎn) 閉包

閉包：閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)，簡單點(diǎn)說，就是嵌套函數(shù)（關(guān)于閉包的解釋和使用，大家可以查閱相關(guān)資料，這里就不過多贅述了）

有了思路，我們就開始試試看

<template>
?? ?<p>{{ getCallerName(callRecord) }}</p>
?</template>
<script>
export default {
?? ?props: {
?? ??? ?callRecord: {
?? ??? ??? ?type: Object,
? ? ? ? ? ? default: () => ({}),
? ? ? ? }
?? ?},
?? ?computed:{
?? ??? ?// 獲取名稱
? ? ? ? getCallerName() {
? ? ? ? ?? ?return callRecord => {
? ? ? ? ? ? ? ? if (callRecord.type === 1 || callRecord.type === 2) return callRecord.callerName;
? ? ? ? ? ? ? ? return callerInfo.callerNumber;
? ? ? ? ? ? };
? ? ? ? },
?? ?}
}

觀察兩段代碼可以看出，我們?cè)谟?jì)算屬性里return了一個(gè)函數(shù)，這個(gè)函數(shù)的參數(shù)即我們傳入的值，而內(nèi)部也能直接拿到并使用這個(gè)值，這樣就做到了計(jì)算屬性傳參（當(dāng)然，多個(gè)參數(shù)也是可行的）

好了，以上就是對(duì)計(jì)算屬性如何傳參的介紹使用

vue計(jì)算屬性傳參,根據(jù)值不同,渲染相應(yīng)的內(nèi)容

業(yè)務(wù)描述

在開發(fā)項(xiàng)目過程中，后臺(tái)傳過來一個(gè)數(shù)組，根據(jù)類型顯示相應(yīng)內(nèi)容。

1、可以直接在渲染出用三目表達(dá)式選擇渲染內(nèi)容?？煽蛇x擇的條件多了，就不適用了，也不利于擴(kuò)展。

2、采用計(jì)算屬性。

<template v-for="(item,index) in languageAddDataArray" >
<el-form-item :label=getLanguageType(item.languageType) >
? ? <el-input v-model="item.content" ?auto-complete="off" size="mini"> </el-input>
</el-form-item>
?</template>
<script>
? ? ? ? ? ?export default {
? ? ? ? ?data () {
? ?languageAddDataArray:[],
? ? ? ? ?},
? ? ? ? computed:{
? getLanguageType(){
? ? ? ? return function (type) {
? ?return type==1?'中文':'英文';
? ? ? ? }
? ?}
? ? ? ?}
? ? ? ? ? ?}
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: