Vue中slot插槽作用與原理詳解

Posted on by

1、作用

  • 父組件向子組件傳遞內容
  • 擴展、復用、定制組件

2、插槽內心

2.1、默認插槽

把父組件中的數組，顯示在子組件中，子組件通過一個slot插槽標簽顯示父組件中的數據。

子組件

<template>
  <div class="slotChild">
    <h4>{{msg}}</h4>
    <slot>這是子組件插槽默認的值</slot>
  </div>
</template>
<script>
export default {
  name: "slotChild",
  data() {
    return {
      msg: "vue中的插槽---子組件"
    }
  }
}
</script>

父組件

<template>
  <div class="slotStudy">
    <h1>{{ msg }}</h1>
    <SlotChild>
      <p>這是父組件傳入的值，將會替換子組件中slot中編寫的默認值</p>
    </SlotChild>
  </div>
</template>
<script>
import SlotChild from "@/components/slot/SlotChild";
export default {
  name: "slotStudy",
  components: {SlotChild},
  data() {
    return {
      msg: "vue中的插槽---父組件"
    }
  }
}
</script>

    <SlotChild></SlotChild>

2.2、具名插槽（命名插槽）

父組件中通過slot屬性，給插槽命名，在子組件中通過slot標簽，根據定義好的名字填充到對應的位置。這樣就可以指定多個可區分的slot，在使用組件時靈活的進行插值。

子組件：

<template>
  <div class="slotChild">
    <h4>{{msg}}</h4>
    <h1><slot name="h_1"></slot></h1>
    <h2><slot name="h_2"></slot></h2>
    <h3><slot name="h_3"></slot></h3>
  </div>
</template>
<script>
export default {
  name: "slotChild",
  data() {
    return {
      msg: "vue中的插槽---子組件"
    }
  }
}
</script>

父組件：

<template>
  <div class="slotStudy">
    <h1>{{ msg }}</h1>
    <SlotChild>
      <template v-slot:h_1>h1111111111的內容</template>
      <!--      #簡寫-->
      <template #h_2>h2222222的內容</template>
      <template v-slot:h_3>h33333的內容</template>
    </SlotChild>
  </div>
</template>
<script>
import SlotChild from "@/components/slot/SlotChild";
export default {
  name: "slotStudy",
  components: {SlotChild},
  data() {
    return {
      msg: "vue中的插槽---父組件"
    }
  }
}
</script>

2.3、作用域插槽

用得不多。

將子組件中data的數據傳出，在父組件中使用。子組件渲染作用域插槽時，可以將子組件內部的數據傳遞給父組件，讓父組件根據子組件的傳遞過來的數據決定如何渲染該插槽。在標簽中通過v-slot="要傳過來的數據"來接收數據。

實現原理

實現原理：當子組件vm實例化時，獲取到父組件傳入的slot標簽的內容，存放在vm. s l o t 中，默認插槽為 v m . slot中，默認插槽為vm. slot中，默認插槽為vm.slot.default，具名插槽為vm. s l o t . x x x ， x x x 為插槽名，當組件執行渲染函數時候，遇到 s l o t 標簽，使用 slot.xxx，xxx 為插槽名，當組件執行渲染函數時候，遇到slot標簽，使用 slot.xxx，xxx為插槽名，當組件執行渲染函數時候，遇到slot標簽，使用slot中的內容進行替換，此時可以為插槽傳遞數據，若存在數據，則可稱該插槽為作用域插槽。

子組件：

<template>
  <div class="slotChild">
    <h4>{{ msg }}</h4>
    <h1>
      <slot :str="strDate" name="n_str">{{ strDate.name }}</slot>
    </h1>
    <h2>
      <slot :str="strDate" name="j_str">{{ strDate.job }}</slot>
    </h2>
  </div>
</template>
<script>
export default {
  name: "slotChild",
  data() {
    return {
      msg: "vue中的插槽---子組件",
      strDate: {
        name: "學習前端的小方同學",
        job: "找工作中",
        age:"我每年都是18"
      }
    }
  }
}
</script>

父組件：

<template>
  <div class="slotStudy">
    <h1>{{ msg }}</h1>
    <SlotChild>
      <template #n_str="strProps">
        {{ strProps.str.job }}
      </template>
      <template v-slot:j_str="strProps">
        {{ strProps.str.age }}
      </template>
    </SlotChild>
  </div>
</template>
<script>
import SlotChild from "@/components/slot/SlotChild";
export default {
  name: "slotStudy",
  components: {SlotChild},
  data() {
    return {
      msg: "vue中的插槽---父組件"
    }
  }
}
</script>

到此這篇關於Vue中slot插槽作用與原理詳解的文章就介紹到這瞭,更多相關Vue slot插槽內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：