1. vue 計算屬性如何傳遞自定義值

在 Vue.js 中，計算屬性主要用于根據已有的數據屬性計算出新的值，并且這種計算是自動緩存的。

然而，如果你需要在計算屬性內部使用一些自定義的值，或者需要根據某些條件來改變計算的結果，你可以通過以下幾種方式來實現：

1.1. 使用方法來代替計算屬性

如果計算邏輯較為復雜或者需要傳遞額外參數，你可以考慮使用方法（methods）而非計算屬性。方法可以在任何地方被調用，并且可以接受參數。

<template>
  <div>
    <p>{{ customGreeting('World') }}</p>
  </div>
</template>

<script>
export default {
  methods: {
    customGreeting(name) {
      return `Hello, ${name}!`;
    }
  }
};
</script>

在這個例子中，customGreeting 是一個方法，它接受一個參數 name 并返回一個問候語。這個方法被直接在模板中調用了。

1.2. 在計算屬性內部使用自定義值

如果你仍然想使用計算屬性，但需要在內部使用一些自定義的值，可以在計算屬性中訪問 this 對象，并從中獲取所需的數據。這些數據可以是任何定義在 data、props 或者其他計算屬性中的值。

<template>
  <div>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'World'
    };
  },
  computed: {
    greeting() {
      const prefix = 'Hello, ';
      return `${prefix}${this.name}!`;
    }
  }
};
</script>

在這個例子中，greeting 是一個計算屬性，它使用了一個定義在 data 中的 name 值，并且在計算過程中使用了一個局部變量 prefix。

1.3. 傳遞額外參數給計算屬性

如果你確實需要將一些自定義值傳遞給計算屬性，并且這些值不是 Vue 實例的數據屬性的一部分，你可以考慮使用一個包裝函數或者方法來構造所需的輸入，并調用計算屬性。

<template>
  <div>
    <p>{{ customGreeting('World', '!') }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    greeting(prefix, suffix) {
      return `${prefix}${this.name}${suffix}`;
    }
  },
  methods: {
    customGreeting(name, suffix) {
      const prefix = 'Hello, ';
      return this.greeting(prefix, suffix);
    }
  }
};
</script>

在這個例子中，我們定義了一個方法 customGreeting，它接受兩個參數 name 和 suffix，并在內部調用了計算屬性 greeting，向其傳遞了 prefix 和 suffix 參數。

需要注意的是，計算屬性本質上是為了計算數據屬性的派生值，并不適合接受外部參數。因此，如果你需要傳遞多個參數或者邏輯較復雜，建議使用方法。

1.4. 結論

總的來說，如果你需要傳遞自定義值給計算屬性，最靈活的方式可能是使用方法，尤其是當需要傳遞多個參數或者邏輯較為復雜的時候。

然而，如果你只需要簡單的計算，并且計算結果僅依賴于當前 Vue 實例的數據屬性，那么計算屬性仍然是一個很好的選擇。