vue 中的slot 和 mixins

前言

vue 爲咱們提供了不少複用性的方式,slot 和 mixins 就是其中兩種...下面對這兩種方式作一下記錄

插槽使用場景

- 該組件被多個地方使用
- 每一個父組件中對該組件的內部有一部分須要特殊定製
- slot可讓咱們更好的複用組件的同時並對其定製化處理
- 能夠理解爲父組件想子組件傳遞了一段 html 文本
要求:
    1.子組件模板包含至少一個 插槽 <slot></slot>
    2.父組件整個內容片斷將插入到 slot 所在的 DOM 位置，並替換掉 slot 標籤自己

1.普通插槽 slot

父組件: 負責分發插槽內容
        <child ref=child>
            我是父組件分發給 child 的全部內容
        </child>
        父組件獲取子組件能夠經過 this.$refs.child 來作操做

子組件:  <template>
            <slot>這裏能夠放一些默認值</slot>
        </template>
        模板中放置一個 <slot></slot>組件,
        咱們能夠自定義組件中的方法和數據,封裝一些通用邏輯,好比前幾篇中封裝的 scroll滾動組件

2.具名插槽 子組件經過 name 屬性 來匹配父組件分發的內容

父組件: 添加 slot 屬性來做爲標識
        <div slot="header">我是 header 分發的內容 111</div>
        <div slot="main">我是 main 分發的內容222</div>
        <div slot="footer">我是 footer 分發的內容333</div>

      在2.6.0 以上使用的是 v-slot:header; 默認插槽爲: v-slot:default

子組件: slot 添加 name 屬性來接受父組件分發的 DOM 元素
        <template>
            <slot name="header"></slot>
            <slot name="main"></slot>
            <slot name="footer"></slot>
        </template>
    固然,咱們還能夠調換插槽的位置...

3.做用域插槽 父組件能夠接收來自子組件的 slot 傳遞過來的參數值

能夠理解爲: 子組件中的做用域插槽能夠爲父組件中的插槽的展現提供數據

子組件:
    <template>
        <div>
            <slot name="header" :value="value"></slot>
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                    value: '我是子組件的值'
                }
            }
        }
    </script>

父組件:
    <child>
        <template slot="header" slot-scope="slotHeaderProps">
            渲染子組件傳過來的對象中 value值{{ slotHeaderProps.value }}
        </template>
    </child>

    在 2.6 以上綁定值的方式: v-slot:header="slotHeaderProps"
    並且可使用解構 v-slot:header="{value}", 將子組件傳過來的值解構

    還有就是, 咱們能夠把 slot直接寫在子組件行內, 沒必要另起一個 template
    即這樣: <child v-slot:header="{value}">{{value}}</child>

vue3.0之後 slot 和 slot="xxx",slot-scope 的方式會被廢棄...
新的用法slot, v-slot:xxx || v-slot:default, v-slot:xxx="slotProps"
簡寫: v-slot:header 能夠被重寫爲 #header

混入 Mixins 使用

- 也是爲了實現代碼邏輯複用
- 當多個組件中出現業務邏輯重複時咱們就能夠抽離重複代碼片斷,寫成一個混入對象
- 父組件直接引入這個對象

代碼演示

就拿一個比較常見的場景: 下拉加載更多數據; 這類業務在H5端能夠說是很是常見了,當咱們不少頁面都要用到時,就能夠抽離成一個混入對象

// 滾動加載
import {throttle} from "@/common/js/tool";

export const scrollMixin = {
  methods: {
    doScrollLoading() {
      // 滾動超出高度
      let scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      // 滾動區域高度
      let scrollHeight =
        document.body.scrollHeight || document.body.scrollHeight;
      // 可視區高度
      let clientHeight =
        document.documentElement.clientHeight || document.body.clientHeight;

      if (scrollHeight - clientHeight - scrollTop <= this.bottomHeight) {
        // 組件中需加入開關和加載更多; 仍是有些耦合了...
        if (!this.isLoadMore) {
          this.loadMore();
        }
      }
    }
  },
  computed: {
    bottomHeight() {
      return this.$store.state.footerHeight;
    }
  },
  mounted() {
    window.addEventListener("scroll", throttle(this.doScrollLoading, 100, 1));
  },
  destroyed() {
    window.removeEventListener("scroll", throttle(this.doScrollLoading, 100, 1));
  }
}

父組件中引入使用

import { scrollMixin } from "@/mixins/scrollMixin";
mixins: [scrollMixin]

注意組件中重寫的方法會覆蓋混入中的方法,loadMore和 isloadMore 須要在
引用的組件中進行重寫

總結

當混合對象與組件包含同名選項時，這些選項將以適當的策略合併。例如，同名鉤子函數被併入一個數組，於是都會被調用。另外，混合的鉤子將在組件本身的鉤子以前調用。
值爲對象的選項，如 methods, components 和 directives 將合併到同一個對象內。若是鍵衝突則組件的選項優先。

組件：在父組件中引入組件，至關於在父組件中給出一片獨立的空間供子組件使用，而後根據props來傳值，但本質上二者是相對獨立的。

Mixins：則是在引入組件以後與組件中的對象和方法進行合併，至關於擴展了父組件的對象與方法，能夠理解爲造成了一個新的組件。