コンポーネント
プロパティ
- defineProps()を使う。
- <script setup>内ではdefinePropsのインポートは不要。
- <template>内では{{ プロパティ名 }}で参照可能。<script setup>内ではdefinePropsの戻り値を使う。
- defaultに配列・オブジェクトを指定する場合は、デフォルト値を返す関数を渡す。
<script setup>
const props = defineProps([
msg: {
type: String,
required: true
);
num: {
type: Number,
default: 0
);
]);
console.log(props);
</script>
<template>
<p>{{ msg }}: {{ num }}</p>
</template>呼び出し
<Hoge msg="aaaa" :num="100" />
値の更新
- プロパティは読み取り専用であるため、値を変更することはできない。
- プロパティ値を変更したい場合は、値をRef変数に退避させる。
const props = defineProps([init: {type: Number}]);const num = ref(props.init);num++;
カスタムイベント
- defineEmits()を使う。
<script setup>
const emits = defineEmits(['increment']);
const handleClick = emits('increment', 999);
</script>
<template>
<input type="button" @click="handleClick" value="step" />
</template>呼び出し
<script setup>
const handleIncrement = num => console.log(num);
</script>
<template>
<Hoge @increment="handleIncrement" />
</template>Provide / Inject
- Props down, Event upだと階層が深くなった場合にバケツリレーが発生してしまう。
- Provide / Injectを使うと、上位のコンポーネントでProvide(提供)された値を配下のコンポーネントにInject(注入)できるようになる。
上位コンポーネント
<script setup>
import { ref, provide } from 'vue'
const nums = ref([100, 777, 30, 5]);
provide('list', nums);
provide('str', 'hoge');
</script>子孫コンポーネント
<script setup>
import { Inject } from 'vue'
const nums = inject('list');
const str = inject('str');
</script>値の操作
- 値の操作はProvide側で関数として定義し、値と一緒にprovide()で渡す。
上位コンポーネント
<script setup>
import { ref, provide } from 'vue'
const nums = ref([100, 777, 30, 5]);
const deleteNum = i => nums.value.splice(i, 1);
provide('list', {nums, deleteNum});
</script>子孫コンポーネント
<script setup>
import { Inject } from 'vue'
const {nums, deleteNum} = inject('list');
</script>コンポジション関数
- Ref/Reactive変数の生成とそれを操作する関数は、再利用できるように別ファイルに切り出すべきである。
- 通常はsrc/components/composite/useXxx.jsとして格納する。
- このように再利用を目的として切り出した関数をコンポジション関数と呼ぶ。
- コンポジション関数は以下のルールで定義する。
- 戻り値はRef/Reactive変数とメソッドを持ったオブジェクトである。
- ファイル名はuseXxx.jsとする。
<script setup>
import { ref } from 'vue'
export default function() {
const books = ref([{title: '書籍1'}, {title: '書籍2'}]);
const deleteBook= i => books.value.splice(i, 1);
return {books, deleteBook};
}
</script>呼び出し
<script setup>
import useBook from '../composite/useBook'
provide('list', useBook());
/*
下記のように書いてもいいが、上記の方が簡潔に書ける
const {books, deleteBook} = useBook();
provide('list', {books, deleteBook});
*/
</script>