HTML 的世界里，我們想創建一個面板，包括標題和文本。你可以像這樣創建：

<div class="panel">
    <div class="panel__header">Title</div>
    <div class="panel__body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, sit!
    </div>
</div>

通過應用 CSS 和 JavaScript 到這些類，我們可以重復使用這段 HTML。這得益于類的存在，這也是像 Bootstrap 這樣的 CSS 框架多年來運作的方式。 現在讓我們看看 Vue 是如何處理可重用性的： 創建 Vue 組件 首先，我們需要在一個組件中創建一個基礎的面板類。 創建 Panel.vue 組件：

<template>
<div>
    <div class="header">Title</div>
    <div class="body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, sit!
    </div>
</div>
</template>

<script>
export default {

}
</script>

注意，我們可以消除一些類，因為我們的 CSS 將被限制在這個組件內部，同時 header 明確指向面板的頭部。

現在，不再重復這個 HTML 塊，而是在需要的地方導入這個組件。

在 App.vue 中添加兩個面板組件

<template>
<div>
    <Panel />
    <Panel />
</div>
</template>

<script>
import Panel from './Panel.vue'

export default {
    components: { Panel },
}
</script>

這種關注點的分離非常好，因為我們不再有各種嵌套的 div 容器，而是僅僅使用了 Panel，使得我們的模板非常易于理解。 動態 Props 但是等等！像這樣，標題和內容將始終保持不變。沒錯，所以我們需要讓這些屬性是動態的。 為此，我們需要讓父組件（App.vue）將標題和內容傳遞給子組件（Panel.vue）。子組件通過 props 定義它接受的屬性。 Props 在 Panel.vue 中：

<template>
<div>
    <div class="header">{{ title }}</div>
    <div class="body">{{ body }}</div>
</div>
</template>

<script>
export default {
    props: {
        title: {
            type: String,
            required: true,
        },
        body: String,
    }
}
</script>

我們的組件接受兩個 props。title 必須是字符串并且是必需的，body 也是一個字符串，但不一定是必需的。

App.vue 現在可以將 props 傳遞給面板組件：

<template>
<div>
   <Panel title="Lorem Ipsum" body="Lorem ipsum dolor sit amet" />
   <Panel title="Something else" />
</div>
</template>

<script>
import Panel from './Panel.vue'

export default {
    components: { Panel },
}
</script>

Props 與普通 HTML 屬性非常相似。

樣式

現在，某些面板特別重要，它們的背景顏色需要突出顯示。在 HTML 中，現在我們要為面板添加一個 modifier 類并進行樣式設置。

讓我們添加類 panel--primary：

<div class="panel panel--primary">
    <div class="panel__header">Title</div>
    <div class="panel__body">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium, sit!
    </div>
</div>

在 Vue 中，這將簡單地成為另一個 prop。

在 Panel.vue 中：

<template>
<div :class="{primary: isPrimary}">
    <div class="header">{{ title }}</div>
    <div class="body">{{ body }}</div>
</div>
</template>

<script>
export default {
    props: {
        title: "String,"
        body: String,
        isPrimary: {
            type: Boolean,
            default: false,
        },
    }
}
</script>

<style scoped>
    .primary {
        background-color: #369; /* you might as well have a global CSS rule for the background color */
    }
</style>

我們在 props 列表中添加了 isPrimary prop。注意如何將其默認為 false。現在，只需在實際需要主要面板時傳遞 isPrimary prop。

在 App.vue 中：

<template>
<div>
   <Panel isPrimary title="Lorem Ipsum" body="Lorem ipsum dolor sit amet" />
   <Panel title="Something else" body="Lorem ipsum dolor sit amet" />
</div>
</template>

<script>
import Panel from './Panel.vue'

export default {
    components: { Panel },
}
</script>

傳遞數據作為 Props

到目前為止，我們只向子組件傳遞了字符串。但是當我們需要傳遞其他數據時會發生什么呢？

在 App.vue 中，將標題和內容定義為實際數據，并嘗試將其傳遞給子組件。

<template>
<div>
   <Panel isPrimary title="title" body="body" />
</div>
</template>

<script>
import Panel from './Panel.vue'

export default {
    components: { Panel },
    data() {
        return {
            title: 'Lorem Ipsum',
            body: 'Lorem ipsum dolor sit amet',
        }
    }
}
</script>

上述代碼將不起作用。它將字面傳遞字符串 title 和 body，而不是變量的內容。為了修復這個問題，我們必須在 prop 前添加一個前綴。因此，我們只需更改 App.vue 的模板部分：

<template>
<div>
   <Panel :title="title" :body="body" />
</div>
</template>

實際上，你可以簡化以上模板，簡單地使用：

<template>
<div>
   <Panel :title="title" :body="body" />
</div>
</template>

事實上，v-bind 允許任何 JavaScript 表達式。 總結 通過 Vue 組件，我們實現了 HTML 中面板的重用，并將其做了進一步的改進，使得標題和內容可以動態傳遞。通過 props 和 slots 的使用，我們能夠更加靈活地構建和組織我們的界面組件。

先看我們要實現怎么一個效果，效果視頻如下：

<script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

分析

1.全選和取消全選做法：讓下面所以的復選框的checked屬性跟隨全選按鈕即可

2.下面復選框需要全部選中，上面全選才能選中做法：給下面所有復選框綁定點擊事件，每次點擊，都要循環查看下面所有的復選框是否有沒選中的，如有有一個沒選中的，上面全選就不選中。

3.可以設置一個變量，來控制全選是否選中。

代碼