Zenn
✨

【Vue】学習開始２週目で覚える内容

2021/01/16に公開
JavaScript
Vue.js
tech

２週目で学ぶべきこと

  • v-model
  • 名前付きslot
  • スコープ付きslot
  • 動的コンポーネント
  • ライフサイクルフック

v-model

  • v-modelディレクティブ：formのinput要素に対して、データバインディングを行う際に使用する
  • データバインディング：データと表示を結びつけ、双方向に変更を反映させること
<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：親コンポーネントから子コンポーネントにテンプレートを差し込む機能

◆ 親コンポーネント


<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!"
    }
  }
};

◆ 子コンポーネント


<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に、親コンポーネントからアクセスすること

◆ 子コンポーネント


<template>
  <div>
    <!-- dataプロパティの"word"を、slotに設定する -->
    <!-- ※sampleは"任意の属性名"を設定する -->
    <slot name="sample" v-bind:sample="word"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      word: "good morning!"
    }
  }
};


<template>
  <div>
    <Child>
      <!-- 子コンポーネントの v-bind sample="word" が参照される -->
      <!-- "slotProps"は任意の属性名"を設定する -->
      <template v-slot:sample="slotProps">
      <!-- slotPropsは"template内"で使用可能 -->
        <h1>{{ slotProps }}</h1>
　　　　</template>
    </Child>
  </div>
</template>

動的コンポーネント

  • コンポーネント間の切り替えをスムーズに行う目的で使用する

◆ 子コンポーネント


<template>
  <p>Child</p>
</template>

◆ 親コンポーネント


<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メソッド


<script>
export default {
  destroyed() {
    //Vueインスタンスが破棄された際に、出力される
    console.log("Hello World!");
  }
}
</script>

◆ keep-alive

<template>
  <div>
  <keep-alive>
  <!-- 保持したい"コンポーネント"を"keep-alive"で囲む -->
  <component v-bind:is="sample"></component>
  </keep-alive>
  </div>
</template>

◆ activated / deactivatedメソッド


<script>
export default {
  activated() {
    //コンポーネントが"活性化状態"の時に出力される
    console.log("Hello World!");
  },
  deactivated() {
   //コンポーネントが"非活性化状態"の時に出力される
    console.log("Good morning");
  }
};
</script>

同シリーズ

参考文献

Discussion