---
tags: Mike課程
---

# 組件資料傳遞 實戰

1. 先將要定義傳遞到每個組件的資料寫入最上層(例如 app.vue)頁面中。

 setup() {
 
    // 開關 class 按鈕
    const isOpen = ref(true);
    // 點擊後切換開關
    const HandListShow = () => {
      isOpen.value = !isOpen.value;
    };

    return { isOpen, HandListShow };
  },

2. 將變數傳入組件中

<template>
  <TitleBar :HandListShow="HandListShow" />
  <ListItem :isOpen="isOpen" />
</template>

3. 子組件接收並傳入 HTML使用

export default {
  // 子組件接收
  props: {
    isOpen: {
      type: Boolean,
      default: true,
    },
  },
  setup(props) {
    const listArr = reactive([
      { name: "2020 Vue3 專業職人 | 入門篇" },
      { name: "2020 Vue3 專業職人 | 加值篇" },
      { name: "2020 Vue3 專業職人 | 進階篇" },
      { name: "現代 JavaScript 職人之路｜入門篇" },
      { name: "現代 JavaScript 職人之路｜中階實戰篇" },
    ]);
    return {
      listArr,
      props,
    };
  },
};

<template>
<!--  props.isOpen 傳遞變數使用    -->
  <ul :class="['box', { open: props.isOpen }]">
    <li v-for="(list, idx) in listArr" :key="list.name">
      {{ idx + 1 }}. {{ list.name }}
    </li>
  </ul>
</template>

4. 點擊事件組件接收

<script>
export default {
  props: {
    HandListShow: {
      type: Function,
      default: () => {},
    },
  },
  setup(props) {
    return { props };
  },
};
</script>

* 傳入HTML模板以變數使用

<template>
  <a class="title" @click="props.HandListShow">課程列表</a>
</template>