#２週目で学ぶべきこと
- v-model
- 名前付きslot
- スコープ付きslot
- 動的コンポーネント
- ライフサイクルフック
#v-model
- v-modelディレクティブ：
formのinput要素に対して、データバインディングを行う際に使用する - データバインディング：データと表示を結びつけ、
双方向に変更を反映させること
App.vue
<template>
<div>
<!-- sampleオブジェクト内のanswerを参照する -->
<input v-model="sample.answer">
<p>{sample.answer}</p>
</div>
</template>
<script>
export default {
data() {
return {
//オブジェクト名：sample プロパティ名：answer
sample: {
answer: "Hello World!"
}
}
}
};
</script>
#名前付きslot
- slot：
親コンポーネントから子コンポーネントにテンプレートを差し込む機能
####◆ 親コンポーネント
App.vue
<template>
<div>
<Child>
<!-- 子コンポーネントの"slot name"で参照される -->
<template v-slot:sample>
<h1>親コンポーネントの表示</h1>
</template>
<!-- 子コンポーネントの"slot name"で参照される -->
<template v-slot:answer>
<!-- dataプロパティ参照 -->
<p>{{word}}</p>
</template>
</Child>
</div>
</template>
<script>
export default {
data() {
return {
word: "good morning!"
}
}
};
####◆ 子コンポーネント
Child.vue
<template>
<div>
<!-- 親コンポーネント"v-slot:sample"を参照する -->
<slot name="sample"></slot>
<hr>
<p>Hello World!</p>
<hr>
<!-- 親コンポーネント"v-slot:answer"を参照する -->
<slot name="answer"></slot>
</div>
</template>
#スコープ付きslot
-
子コンポーネントslotに渡されたpropsに、親コンポーネントからアクセスすること
####◆ 子コンポーネント
Child.vue
<template>
<div>
<!-- dataプロパティの"word"を、slotに設定する -->
<!-- ※sampleは"任意の属性名"を設定する -->
<slot name="sample" v-bind:sample="word"></slot>
</div>
</template>
<script>
export default {
data() {
return {
word: "good morning!"
}
}
};
App.vue
<template>
<div>
<Child>
<!-- 子コンポーネントの v-bind sample="word" が参照される -->
<!-- "slotProps"は任意の属性名"を設定する -->
<template v-slot:sample="slotProps">
<!-- slotPropsは"template内"で使用可能 -->
<h1>{{ slotProps }}</h1>
</template>
</Child>
</div>
</template>
#動的コンポーネント
-
コンポーネント間の切り替えをスムーズに行う目的で使用する
####◆ 子コンポーネント
Child.vue
<template>
<p>Child</p>
</template>
####◆ 親コンポーネント
App.vue
<template>
<div>
<!-- is："別のコンポーネントを参照する"属性 -->
<component v-bind:is="sample"></component>
</div>
</template>
<script>
import Child from "./components/Child.vue";
export default {
data() {
return {
//sample：属性名 default：値
sample: "default"
};
},
components: {
//子コンポーネントを参照する
Child
}
#ライフサイクルフック
- activated：生き続けたコンポーネントを
活性化する際に、参照される - deactivated：生き続けたコンポーネントを
非活性化する際に、参照される - destroyed：
Vueインスタンスが破棄された際に、参照される - keep-alive：コンポーネントの内容を
保持したい時に使用する
####◆ destroyedメソッド
Destroy.vue
<script>
export default {
destroyed() {
//Vueインスタンスが破棄された際に、出力される
console.log("Hello World!");
}
}
</script>
####◆ keep-alive
Keepalive.vue
<template>
<div>
<keep-alive>
<!-- 保持したい"コンポーネント"を"keep-alive"で囲む -->
<component v-bind:is="sample"></component>
</keep-alive>
</div>
</template>
####◆ activated / deactivatedメソッド
Sample.vue
<script>
export default {
activated() {
//コンポーネントが"活性化状態"の時に出力される
console.log("Hello World!");
},
deactivated() {
//コンポーネントが"非活性化状態"の時に出力される
console.log("Good morning");
}
};
</script>
#同シリーズ
#参考文献