Vue functional componentでのmethods,filter

functional componentの基本については以前記載したので、
今回はfilterとmethodについてまとめます。

filter

通常のcomponent同様

<template functional>
  <div>
    {{ props.num | yen }}
  </div>
</template>

<script>
export default {
  props: {
    num: { type: Number, default: 0 }
  },
  filters: {
    yen: function(str) {
      return str + "yen";
    }
  }
};
</script>

method

$optionsを通してアクセスできる。

通常のcomponentと同じように「methods:{}」とオブジェクトの中に定義しても問題ないが、テンプレートで「$options.methods.XXX()」となって見づらくなるだけのため直接。
またmethodの中で「this.XXX(props)」はできないため、使用するならmethodの引数として渡す。

<template functional>
  <div>
    {{ $options.double(props.num) }}
  </div>
</template>

<script>
export default {
  props: {
    num: { type: Number, default: 0 }
  },
  double: function(num) {
    return num * 2;
  }
};
</script>