提姆寫程式

0%

Vue 筆記 - 使用 emit 指定父層元件是否顯示資訊的功能

發表於 更新於 分類於 Disqus：
實作 emit out 功能

emit

本篇記錄專案有一功能為父層頁面需傳資料到 checkbox 的子元件， checkbox 子元件接到資料後判斷到其中一個選項的值，在傳子層結果到父層，再讓父層取到其值時連動另一個說明文字的子元件是否顯示。

實際流程

  1. 有兩個元件一個為 checkbox Group 與 Note 元件。
  2. 當選取 checkbox 指定選項時，會把此選項的值傳到父層。
  3. 當說明列表元件取得指定選項的值為 true 時，就會顯示。

直接看程式碼：連結

實作流程

先建立好父子層元件。

父層元件

PropsEmitPractice.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<template>
  <div>
    <checkbox-group></checkbox-group>
    <note></note>
  </div>
</template>

<script>
import CheckboxGroup from "@/components/CheckboxGroup.vue";
import Note from "@/components/Note.vue";
export default {
  components: { CheckboxGroup, Note },
  data() {
    return {};
  },

  mounted() {},

  methods: {},
};
</script>

子層元件

checkboxGroup.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<template>
  <div class="container mx-auto py-4">
    <div class="flex items-center">
      <div v-for="item in checkboxList" :key="item" class="px-5 mx-auto flex items-center">
        <input type="checkbox"/>
        <p class="pl-4 text-xl">{{ item.label }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      checkboxItem: [],
    };
  },
  computed: {
    checkboxList() {
      return [
        {
          key: "option 01",
          value: "option 01",
        },
        {
          key: "option 02",
          value: "option 02",
        },
        {
          key: "option 03",
          value: "option 03",
        },
        {
          key: "option 04",
          value: "option 04",
        },
        {
          key: "option 05",
          value: "option 05",
        },
      ];
    },
  },
};
</script>

Note.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<template>
  <div class=" container mx-auto bg-gray-100 py-8 px-4">
    <ul class="space-y-4 text-left">
      <li>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat
        repellendus, consequuntur cupiditate ut officiis distinctio deserunt
        aliquid excepturi error omnis earum vitae repellat. Sunt ullam ratione,
        fugit earum eligendi magnam!
      </li>
      <li>
        Est rerum aliquam non quaerat, et quod facere natus recusandae
        exercitationem voluptates omnis sunt impedit iste optio debitis totam
        magni tempore fugiat quidem, voluptatum inventore, cum molestiae.
        Minima, aspernatur illum?
      </li>
      <li>
        Magnam error ut soluta commodi vitae autem, esse modi aliquam minima
        quos voluptas. Officia eos, quod asperiores eum repellat, corrupti velit
        amet culpa temporibus, beatae esse! Cum odit at provident.
      </li>
      <li>
        Neque sit, fuga ab repudiandae porro eius fugiat quas. Tenetur doloribus
        est vel molestiae accusamus. Adipisci magnam quas, atque rerum eveniet
        architecto quidem numquam perferendis libero enim iusto soluta
        exercitationem?
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: "note",
  };
</script>

完成後會得到一個有 checkbox 群組以及說明文字的畫面。

checkbox emit

實作 checkboxGroup 功能

先取得 checbox 資料

在 checkboxGroup 中寫入選取 checkbox 值的方法。
checkboxGroup.vue

template

1
<input type="checkbox" @click="toggleCheck(item.key)" />

script

1
2
3
4
5
6
7
8
9
10
11
methods: {
  toggleCheck(key) {
    const index = this.checkboxItem.indexOf(key);
    if (index > -1) {
      this.checkboxItem.splice(index, 1);
    } else {
      this.checkboxItem.push(key);
    }
    this.$emit("toggleCheckboxGroup", this.checkboxItem);
  },
},

說明：

  • 透過 indexOf 方法找到 checkboxItem 陣列中的索引。
  • 當 index 為 -1 時為找不到索引。
  • 如果 index 大於 -1，也就是在陣列中有找到值，就用 slice 刪掉索引的值，刪除數量為 1 個。
  • 如果 index 等於 -1，也就是沒有找到值，就用 push 方法加入陣列。
  • 簡單來說就是根據傳入的值，判斷是否存在在陣列中，若存在就刪除，沒有就加入。
  • 最後把陣列用 emit 方式傳到父層。

    this.$emit(‘傳出去的方法名稱’, 要傳的資料)

回到父層 PropsEmitPractice 來接子層 checkboxGroup 的資料

PropsEmitPractice.vue

此時在要接子層資料的地方寫上對應的事件。

template

1
2
3
4
5
6
7
8
<template>
  <div>
    <checkbox-group
      @toggleCheckboxGroup="getCheckboxGroupData"
    ></checkbox-group>
    <note v-if="isGetOption04"></note>
  </div>
</template>

script

1
2
3
4
5
6
7
8
9
10
11
12
data() {
   return {
     isGetOption04: false,
   };
 },
 methods: {
   getCheckboxGroupData(checkboxItemData) {
     this.isGetOption04 = checkboxItemData.find(
       (item) => item === "option 04"
     );
   },
 },

參考資料