#２週目で学ぶべきこと

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>

#同シリーズ

#参考文献