propsとemitを使用したコンポーネント間のデータ受け渡し

Vue.jsは、コンポーネントベースのフレームワークであり、コンポーネント間のデータの受け渡しを効率的に行うための仕組みを提供しています。この記事では、propsとemitを使用してコンポーネント間でデータをやり取りする方法について記述します。

### 目次

1. Vue.jsの基本概念
2. propsを使用したデータの受け渡し
3. emitを使用したイベントの伝播
4. 実践プロジェクトの例

### 1. Vue.jsの基本概念

Vue.jsは、UIを構築するための進化したJavaScriptフレームワークです。コンポーネントは再利用可能なUIの部品であり、それぞれが独自の状態とロジックを持ちます。

### 2. propsを使用したデータの受け渡し

propsは、親コンポーネントから子コンポーネントにデータを渡すための手段です。親コンポーネントがpropsを使用して子コンポーネントにデータを送信し、子コンポーネントはそれを受け取ります。

### 例：親コンポーネントから子コンポーネントへデータを渡す

親コンポーネント：

```vuejs
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent :message="parentMessage" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from Parent'
    };
  }
};
</script>
```

子コンポーネント：

```vuejs
<template>
  <div>
    <h2>Child Component</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>
```

### 3. emitを使用したイベントの伝播

emitは、子コンポーネントから親コンポーネントにイベントを送信するための手段です。子コンポーネントがemitを使用してイベントを発行し、親コンポーネントがそのイベントをリスンして処理します。

### 例：子コンポーネントから親コンポーネントへイベントを送信

子コンポーネント：

```vuejs
<template>
  <div>
    <h2>Child Component</h2>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from Child');
    }
  }
};
</script>
```

親コンポーネント：

```vuejs
<template>
  <div>
    <h1>Parent Component</h1>
    <ChildComponent @message-sent="handleMessage" />
    <p>{{ childMessage }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      childMessage: ''
    };
  },
  methods: {
    handleMessage(message) {
      this.childMessage = message;
    }
  }
};
</script>
```

### 4. 実践プロジェクトの例

### プロジェクト：TODOリストの構築

このプロジェクトでは、親コンポーネントからTODOリストの項目を子コンポーネントに渡し、子コンポーネントから新しい項目を親コンポーネントに送信します。

親コンポーネント：

```vuejs
<template>
  <div>
    <h1>TODO List</h1>
    <TodoInput @add-todo="addTodo" />
    <TodoList :todos="todos" />
  </div>
</template>

<script>
import TodoInput from './TodoInput.vue';
import TodoList from './TodoList.vue';

export default {
  components: {
    TodoInput,
    TodoList
  },
  data() {
    return {
      todos: ['Buy groceries', 'Read a book']
    };
  },
  methods: {
    addTodo(newTodo) {
      this.todos.push(newTodo);
    }
  }
};
</script>
```

子コンポーネント（TodoInput）：

```vuejs
<template>
  <div>
    <input v-model="newTodo" placeholder="Add a new todo" />
    <button @click="submitTodo">Add</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTodo: ''
    };
  },
  methods: {
    submitTodo() {
      this.$emit('add-todo', this.newTodo);
      this.newTodo = '';
    }
  }
};
</script>
```

子コンポーネント（TodoList）：

```vuejs
<template>
  <ul>
    <li v-for="(todo, index) in todos" :key="index">{{ todo }}</li>
  </ul>
</template>

<script>
export default {
  props: {
    todos: {
      type: Array,
      required: true
    }
  }
};
</script>
```

### まとめ

この記事では、Vue.jsのpropsとemitを使用したコンポーネント間のデータの受け渡しについて記述しました。propsを使用して親コンポーネントから子コンポーネントにデータを渡し、emitを使用して子コンポーネントから親コンポーネントにイベントを送信する方法を学びました。これらの手法を駆使して、複雑で動的なアプリケーションの構築を目指します。