[Vue.js] 6. コンポーネント間連携

<template>
  <section class="box">
    <h4>ひとつのコンポーネント</h4>
    <p>コンポーネントとは、・・・</p>
  </section>
</template>

<style>
.box {
  border: green 1px dashed;
  margin: 10px;
}
</style>

<script setup lang="ts">
import OneSection from './components/OneSection.vue'    // 1.
</script>

<template>
  <h1>コンポーネント基礎</h1>
  <section>
    <h2>コンポーネント1個</h2>
    <OneSection />                   // 2.
  </section>
  <section>
    <h2>コンポーネントが複数</h2>
    <OneSection />                   // 2.
    <OneSection />                   // 2.
    <OneSection />                   // 2.
  </section>
</template>

<style>
section {
  border: blue 1px solid;
  margin: 10px;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'

const name = ref('名無し')　　　　　　　　　　　　　// 1-1
</script>

<template>
  <section>
    <p>{{ name }}さんですね！</p>                 // 1-2
    <input type="text" v-model="name" />         // 1-3
  </section>
</template>

<style scoped>                                   /* 1-4 */
section {
  border: green 1px dashed;                     /* 1-5 */
  margin: 10px;
}
</style>

<script setup lang="ts">
import WithMode from './components/WithModel.vue'
</script>

<template>
  <h1>コンポーネントの独立性</h1>
  <section>
    <h2>v-modelを含むコンポーネント</h2>
    <WithMode />                              <!-- 2-1 -->
    <WithMode />                              <!-- 2-1 -->
  </section>
</template>

<style>
section {
  border: blue 1px solid;                     /* 2-2 */
  margin: 10px;
}
</style>

<div id="app" data-v-app="">
  <h1>コンポーネントの独立性</h1>
  <section>
    <h2>v-modelを含むコンポーネント</h2>
    <section data-v-eee87bea="">
      <p data-v-eee87bea="">名無しさんですね！</p>
      <input data-v-eee87bea="" type="text">
    </section>
    <section data-v-eee87bea="">
      <p data-v-eee87bea="">名無しさんですね！</p>
      <input data-v-eee87bea="" type="text">
    </section>
  </section>
</div>

section[data-v-eee878bea] {
  border: green 1px dashed;
  margin: 10px;
}

<script setup lang="ts">
interface Props {                 // (1)
  title: string
  content: string
}

defineProps<Props>()              // (2)
</script>

<template>
  <section class="box">
    <h4>{{ title }}</h4>
    <p>{{ content }}</p>
  </section>
</template>

<style scoped>
.box {
  border: green 1px dashed;
  margin: 10px;
}
</style>

<script setup lang="ts">
import OneInfo from './components/OneInfo.vue'
</script>

<template>
  <h1>Props基礎</h1>
  <section>
    <h2>属性に直接記述</h2>
    <OneInfo title="Propsの利用" content="子コンポーネントにデータを渡すにはPropsを利用する。" />
  </section>
</template>

<style>
section {
  border: blue 1px solid;
  margin: 10px;
}
</style>

interface Props {
  title: string
  content: string
}

interface Props {
  各Prop名: データ型
   :
}
defineProps<Props>()

<OneInfo title="Propsの利用" content="子コンポーネントにデータを渡すにはPropsを利用する。" />

<子コンポーネント名
  各Prop名="このPropsに渡す値"
    :
/>

<script setup lang="ts">
interface Props {
  title: string
  content: number
}
defineProps<Props>()
</script>

<template>
  <section class="box">
    <h4>{{ title }}</h4>
    <p>{{ content }}</p>
  </section>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import OneInfo from './components/OneInfo.vue'

const propsTitle = ref('発生した乱数')
const rand = Math.round(Math.random() * 100)
const propsContent = ref(rand)
</script>

<template>
  <h1>Props基礎</h1>
  <section>
    <h2>テンプレート変数を利用</h2>
    <OneInfo v-bind:title="propsTitle" v-bind:content="propsContent" />
  </section>
</template>

<style>
section {
  border: blue 1px solid;
  margin: 10px;
}
</style>

<子コンポーネント名
  v-bind:Prop名="テンプレート変数名"
   :
/>

<script setup lang="ts">
interface Props {
  title: string
  content: string
}
defineProps<Props>()
</script>

<template>
  <section class="box">
    <h4>{{ title }}</h4>
    <p>{{ content }}</p>
  </section>
</template>

<style scoped>
.box {
  border: green 1px dashed;
  margin: 10px;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import OneInfo from './components/OneInfo.vue'

const weatherListInit = new Map<number, Weather>()
weatherListInit.set(1, { id: 1, title: '今日の天気', content: '今日は一日中、晴れでしょう。' })
weatherListInit.set(2, { id: 2, title: '明日の天気', content: '明日は一日中、雨れでしょう。' })
weatherListInit.set(3, { id: 3, title: '明後日の天気', content: '明後日は一日中、雪でしょう。' })
const weatherList = ref(weatherListInit)

interface Weather {
  id: number
  title: string
  content: string
}
</script>

<template>
  <h1>Props基礎</h1>
  <section>
    <h2>ループでコンポーネントを生成</h2>
    <OneInfo
      v-for="[id, weather] in weatherList"
      v-bind:key="id"
      v-bind:title="weather.title"
      v-bind:content="weather.content"
    />
  </section>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

// Propsインターフェースの定義
interface Props {                                           // (1)
  id: number
  name: string
  email: string
  points: number
  note?: string // ?はオプションパラメーター（引数省略可能）
}

// Propsオブジェクトの設定
const props = defineProps<Props>()                           // (2)

// このコンポーネント内で利用するポイント数のテンプレート変数
const localPoints = ref(props.points)                        // (3)

// Propsのnoteを加工する算出プロパティ
const localNote = computed((): string => {                   // (4)
  let localNote = props.note                                 // (5)
  if (localNote == undefined) {
    localNote = '--'
  }
  return localNote
})

// [ポイント加算]ボタンをクリックしたときのメソッド
const pointUp = (): void => {                                 // (6)
  localPoints.value++
}
</script>

<template>
  <section class="box">
    <h4>{{ name }}さんの情報</h4>
    <dl>
      <dt>ID</dt>
      <dd>{{ id }}</dd>
      <dt>メールアドレス</dt>
      <dd>{{ email }}</dd>
      <dt>保有ポイント</dt>
      <dd>{{ localPoints }}</dd>
      <dt>備考</dt>
      <dd>{{ localNote }}</dd>
    </dl>
    <button v-on:click="pointUp">ポイント加算</button>
  </section>
</template>

<style>
.box {
  border: green 1px solid;
  margin: 10px;
}
</style>

<script setup lang="ts">
import { ref, computed } from 'vue'
import OneMember from './components/OneMember.vue'

// 会員リストデータを用意
const memberListInit = new Map<number, Member>()          // (1)
memberListInit.set(33456, {
  id: 33456,
  name: '田中太郎',
  email: 'bou@example.com',
  points: 35,
  note: '初回入会特典あり',
})
memberListInit.set(47783, {
  id: 47783,
  name: '鈴木二郎',
  email: 'mue@example.com',
  points: 53,
})
const memberList = ref(memberListInit)

// 会員リスト内の全会員のポイントの合計算出プロパティ
const totalPoints = computed((): number => {              // (2)
  let total = 0
  for (const member of memberList.value.values()) {
    total += member.points
  }
  return total
})

// 会員情報インターフェース
interface Member {                                         // (3)
  id: number
  name: string
  email: string
  points: number
  note?: string // ?はオプションパラメーター（引数省略可能）
}
</script>

<template>
  <section>
    <h1>会員リスト</h1>
    <p>全会員の保有ポイントの合計: {{ totalPoints }}</p>
    <!-- OneMemberをv-forでループ-->
    <OneMember                                              <!-- (4) -->
      v-for="[id, member] in memberList"
      v-bind:key="id"
      v-bind:id="id"
      v-bind:name="member.name"
      v-bind:email="member.email"
      v-bind:points="member.points"
      v-bind:note="member.note"
    />
  </section>
</template>

const props = defineProps<Props>()                           // (2)
  :
const localNote = computed((): string => {                   // (4)
  let localNote = props.note                                 // (5)
  if (localNote == undefined) {
    localNote = '--'
  }
  return localNote
})

const localPoints = ref(props.points)
  :
// [ポイント加算]ボタンをクリックしたときのメソッド
const pointUp = (): void => {
  localPoints.value++
}

withDefaults(
  defineProps<Props>(),
  {
     非必須Prop名: デフォルト値,
      :
  }
)

<script setup lang="ts">
interface Props {
  rand: number
}

interface Emits {
  (event: 'createNewRand'): void
}

defineProps<Props>()
const emit = defineEmits<Emits>()

const onNewRandButtonClick = (): void => {
  emit('createNewRand')
}
</script>

<template>
  <section class="box">
    <p>子コンポーネントで乱数を表示: {{ rand }}</p>
    <button v-on:click="onNewRandButtonClick">新たな乱数を発生</button>
  </section>
</template>

<style scoped>
.box {
  border: green 1px solid;
  margin: 10px;
}
</style>

<script setup lang="ts">
import { ref } from 'vue'
import OneSection from './components/OneSection.vue'

const randInit = Math.round(Math.random() * 10)
const rand = ref(randInit)
const onCreateNewRand = (): void => {
  rand.value = Math.round(Math.random() * 10)
}
</script>

<template>
  <section>
    <p>親コンポーネントで乱数を表示: {{ rand }}</p>
    <OneSection v-bind:rand="rand" v-on:createNewRand="onCreateNewRand" />
  </section>
</template>

const onCreateNewRand = (): void => {
  rand.value = Math.round(Math.random() * 10)
}

    <OneSection v-bind:rand="rand" v-on:createNewRand="onCreateNewRand" />

  :
interface Emits {                            // 1.
  (event: 'createNewRand'): void             // 2.
}
  :
  :
const emit = defineEmits<Emits>()            // 3.
  :

interface Emits {
  (event: "イベント名"): void
  ：
}
const emit = defineEmits<Emits>()

const onNewRandButtonClick = (): void => {
  emit('createNewRand')
}

<script setup lang="ts">

// Propsインターフェースの定義
interface Props {
  id: number
  name: string
  email: string
  points: number
  note?: string // ?はオプションパラメーター（引数省略可能）
}

// Emit インターフェースの定義
interface Emits {
  (event: 'incrementPoint', id: number): void        // １．
}

// Propsオブジェクトの設定
const props = withDefaults(
  defineProps<Props>(),
  {note: "--"}
)

// Emit の設定
const emit = defineEmits<Emits>()

// [ポイント加算]ボタンをクリックしたときのメソッド
const pointUp = (): void => {
  emit('incrementPoint', props.id)                  // ２．
}
</script>

<template>
  <section class="box">
    <h4>{{ name }}さんの情報</h4>
    <dl>
      <dt>ID</dt>
      <dd>{{ id }}</dd>
      <dt>メールアドレス</dt>
      <dd>{{ email }}</dd>
      <dt>保有ポイント</dt>
      <dd>{{ points }}</dd>                        // ３．
      <dt>備考</dt>
      <dd>{{ note }}</dd>
    </dl>
    <button v-on:click="pointUp">ポイント加算</button>
  </section>
</template>

<style>
.box {
  border: green 1px solid;
  margin: 10px;
}
</style>

<script setup lang="ts">
import { ref, computed } from 'vue'
import OneMember from './components/OneMember.vue'

// 会員リストデータを用意
const memberListInit = new Map<number, Member>()
memberListInit.set(33456, {
  id: 33456, name: '田中太郎', email: 'bou@example.com', points: 35, note: '初回入会特典あり',})
memberListInit.set(47783, {
  id: 47783, name: '鈴木二郎', email: 'mue@example.com', points: 53,})
const memberList = ref(memberListInit)

// 会員リスト内の全会員のポイントの合計算出プロパティ
const totalPoints = computed((): number => {
  let total = 0
  for (const member of memberList.value.values()) {
    total += member.points
  }
  return total
})

// Emit により実行されるメソッド
const onIncrementPoint = (id: number): void => {                // １．
  // 処理関数の id に該当する会員情報オブジェクトを取得
  const member = memberList.value.get(id)

  // 会員情報オブジェクトが存在するならポイントインクリメント        // ２．
  if (member != undefined) {
    member.points++
  }
}

// 会員情報インターフェース
interface Member {
  id: number
  name: string
  email: string
  points: number
  note?: string // ?はオプションパラメーター（引数省略可能）
}
</script>

<template>
  <section>
    <h1>会員リスト</h1>
    <p>全会員の保有ポイントの合計: {{ totalPoints }}</p>
    <!-- OneMemberをv-forでループ-->
    <OneMember
      v-for="[id, member] in memberList"
      v-bind:key="id"
      v-bind:id="id"
      v-bind:name="member.name"
      v-bind:email="member.email"
      v-bind:points="member.points"
      v-bind:note="member.note"
      v-on:incrementPoint="onIncrementPoint"                 // ３．
    />
  </section>
</template>

emit("update.Prop名", 値)

<script setup lang="ts">

// Propsインターフェースの定義
interface Props {
  id: number
  name: string
  email: string
  points: number
  note?: string // ?はオプションパラメーター（引数省略可能）
}

// Emit インターフェースの定義
interface Emits {
  (event: 'update:points', points: number): void                    // (1)
}

// Propsオブジェクトの設定
const props = withDefaults(
  defineProps<Props>(),
  {note: "--"}
}

// Emit の設定
const emit = defineEmits<Emits>()                                   // (2)

const onInput = (event: Event): void => {                           // (3)
  const element = event.target as HTMLInputElement                  // (4)
  const inputPoints = Number(element.value)
  emit('update:points', inputPoints)                                // (5)
}
</script>

<template>
  <section class="box">
    <h4>{{ name }}さんの情報</h4>
    <dl>
      <dt>ID</dt>
      <dd>{{ id }}</dd>
      <dt>メールアドレス</dt>
      <dd>{{ email }}</dd>
      <dt>保有ポイント</dt>
      <dd>
        <input type="number" v-bind:value="points" v-on:input="onInput" />  // (6)
      </dd>
      <dt>備考</dt>
      <dd>{{ note }}</dd>
    </dl>

  </section>
</template>

<style>
.box {
  border: green 1px solid;
  margin: 10px;
}
</style>

<script setup lang="ts">
import { ref, computed } from 'vue'
import OneMember from './components/OneMember.vue'

// 会員リストデータを用意
const memberListInit = new Map<number, Member>()
memberListInit.set(33456, {id: 33456, name: '田中太郎', email: 'bou@example.com', points: 35, note: '初回入会特典あり',})
memberListInit.set(47783, {id: 47783, name: '鈴木二郎', email: 'mue@example.com',  points: 53,})
const memberList = ref(memberListInit)

// 会員リスト内の全会員のポイントの合計算出プロパティ
const totalPoints = computed((): number => {
  let total = 0
  for (const member of memberList.value.values()) {
    total += member.points
  }
  return total
})

// 会員情報インターフェース
interface Member {
  id: number
  name: string
  email: string
  points: number
  note?: string // ?はオプションパラメーター（引数省略可能）
}
</script>

<template>
  <section>
    <h1>会員リスト</h1>
    <p>全会員の保有ポイントの合計: {{ totalPoints }}</p>
    <!-- OneMemberをv-forでループ-->
    <OneMember
      v-for="[id, member] in memberList"
      v-bind:key="id"
      v-bind:id="id"
      v-bind:name="member.name"
      v-bind:email="member.email"
      v-model:points="member.points"                      // １．
      v-bind:note="member.note"
    />
  </section>
</template>

<oneMember
  :
  v-model:points="member.points"
  :
/>

export interface Member {
  id: number
  name: string
  email: string
  points: number
  note?: string
}

<script setup lang="ts">
import { reactive, provide } from 'vue'
import BaseSection from './components/BaseSection.vue'
import type { Member } from './interfaces'

// 会員リストの用意                               // 1.
const memberList = new Map<number, Member>()
memberList.set(33456, {
  id: 33456, name: '田中太郎', email: 'bou@example.com', points: 35, note: '初回入会特典あり',
})
memberList.set(47783, {
  id: 47783, name: '鈴木二郎', email: 'mue@example.com', points: 53,
})

// 会員リストをProvide
provide('memberList', reactive(memberList))     // 2.
</script>

<template>
  <BaseSection />                               // 3.
</template>

<script setup lang="ts">
import { computed, inject } from 'vue'
import OneMember from './OneMember.vue'
import type { Member } from '../interfaces'

// 会員情報リストをInject
const memberList = inject('memberList') as Map<number, Member>    // 1.

// 保有ポイントの合計の算出プロパティ
const totalPoints = computed((): number => {
  let total = 0
  for (const member of memberList.values()) {                     // 2.
    total += member.points
  }
  return total
})
</script>

<template>
  <section>
    <h1>会員リスト</h1>
    <p>全会員の保有ポイントの合計: {{ totalPoints }}</p>
    <OneMember v-for="id in memberList.keys()"                  <!-- 3. --> 
               v-bind:key="id" 
               v-bind:id="id" />                                <!-- 4. -->
  </section>
</template>

<style scoped>
section {
  border: orange 1px dashed;
  margin: 10px;
}
</style>

<script setup lang="ts">
import { computed, inject } from 'vue'
import type { Member } from '../interfaces'                           // 1.

// Propsインターフェースの提議
interface Props {
  id: number
}

// Props オブジェクトの設定
const props = defineProps<Props>()

// 会員情報リストをInject
const memberList = inject('memberList') as Map<number, Member>         // 2.

// 該当する会員情報の取得
const member = computed((): Member => {                                // 4.
  return memberList.get(props.id) as Member                            // 3.
})

// Propsであるnoteを加工する算出プロパティ
const localNote = computed((): string => {
  let localNote = member.value.note                                    // 5.
  if (localNote == undefined) {
    localNote = '--'
  }
  return localNote
})
</script>

<template>
  <section class="box">
    <h4>{{ member.name }}さんの情報</h4>
    <dl>
      <dt>ID</dt>
      <dd>{{ id }}</dd>
      <dt>メールアドレス</dt>
      <dd>{{ member.email }}</dd>
      <dt>保有ポイント</dt>
      <dd>
        <input type="number" v-model.number="member.points" />         <!-- 6. -->
      </dd>
      <dt>備考</dt>
      <dd>{{ localNote }}</dd>
    </dl>
  </section>
</template>

<style>
.box {
  border: green 1px solid;
  margin: 10px;
}
</style>

provide("Provide名", 値)

v-for="[id, member] in memberList"

v-for="id in memberList.keys() v-bind:key="id" v-bind:id="id" />