Vue.js propsのデフォルトに、dataプロパティの値やmethodsの関数を指定するには？

Question

methods: {
    f(){
      console.log("def func test")
    },
  },
  props: {
    func: {
      type: Function,
      default: this.f(),
    },
  },

この記述できないっぽいんですがなんとかなりませんか？defaultに「this.xxx」を指定ってできないんでしょうか？？
コンポーネントに関数の参照渡して子側で呼び出すことがしたいです。
mounted利用すれば意図した処理は実現できそうですがだるいです、標準の機能だけでなんとかならないでしょうか

Comments

[juner]

default は辞めて、呼び出す関数を別途定義してそこで func が undefined だったら this.f を呼び出すって書けばいいのではないでしょうか……？

Answer 1

mounted を使用する必要は無く、 それを呼び出す別の関数を用意して undefined の場合は その関数を呼び出すの様な書き方をすればいいのではないでしょうか？

vue3(script setup) + typescript なら次の様な感じです。

<script setup lang="ts">
interface IProps {
  func?: Function;
  text?: string;
}
const props = withDefaults(defineProps<IProps>(),{
  // 初期値は undefined にしておく
  func: undefined,
  text: "click me!",
});
// 呼び出す初期値関数
function f() {
  console.log("default func call");
}
function callFunc() {
  // undefined だったら 初期値関数を設定する
  const func = props.func ?? f;
  // 呼び出す
  func();
}
</script>
<template>
  <div>
    <button @click=callFunc>{{props.text}}</button>
  </div>
</template>

playground