Vue中slot插槽作用與原理是什么

本篇內(nèi)容介紹了“Vue中slot插槽作用與原理是什么”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1、作用

• 父組件向子組件傳遞內(nèi)容

• 擴(kuò)展、復(fù)用、定制組件

2、插槽內(nèi)心

2.1、默認(rèn)插槽

把父組件中的數(shù)組，顯示在子組件中，子組件通過(guò)一個(gè)slot插槽標(biāo)簽顯示父組件中的數(shù)據(jù)。

子組件

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

父組件

<template>
  <div class="slotStudy">
    <h2>{{ msg }}</h2>
    <SlotChild>
      <p>這是父組件傳入的值，將會(huì)替換子組件中slot中編寫(xiě)的默認(rèn)值</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、具名插槽（命名插槽）

父組件中通過(guò)slot屬性，給插槽命名，在子組件中通過(guò)slot標(biāo)簽，根據(jù)定義好的名字填充到對(duì)應(yīng)的位置。這樣就可以指定多個(gè)可區(qū)分的slot，在使用組件時(shí)靈活的進(jìn)行插值。

子組件：

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

父組件：

<template>
  <div class="slotStudy">
    <h2>{{ msg }}</h2>
    <SlotChild>
      <template v-slot:h_1>h2111111111的內(nèi)容</template>
      <!--      #簡(jiǎn)寫(xiě)-->
      <template #h_2>h3222222的內(nèi)容</template>
      <template v-slot:h_3>h43333的內(nèi)容</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的數(shù)據(jù)傳出，在父組件中使用。子組件渲染作用域插槽時(shí)，可以將子組件內(nèi)部的數(shù)據(jù)傳遞給父組件，讓父組件根據(jù)子組件的傳遞過(guò)來(lái)的數(shù)據(jù)決定如何渲染該插槽。在標(biāo)簽中通過(guò)v-slot="要傳過(guò)來(lái)的數(shù)據(jù)"來(lái)接收數(shù)據(jù)。

實(shí)現(xiàn)原理

實(shí)現(xiàn)原理：當(dāng)子組件vm實(shí)例化時(shí)，獲取到父組件傳入的slot標(biāo)簽的內(nèi)容，存放在vm. s l o t 中，默認(rèn)插槽為 v m . slot中，默認(rèn)插槽為vm. slot中，默認(rèn)插槽為vm.slot.default，具名插槽為vm. s l o t . x x x ， x x x 為插槽名，當(dāng)組件執(zhí)行渲染函數(shù)時(shí)候，遇到 s l o t 標(biāo)簽，使用 slot.xxx，xxx 為插槽名，當(dāng)組件執(zhí)行渲染函數(shù)時(shí)候，遇到slot標(biāo)簽，使用 slot.xxx，xxx為插槽名，當(dāng)組件執(zhí)行渲染函數(shù)時(shí)候，遇到slot標(biāo)簽，使用slot中的內(nèi)容進(jìn)行替換，此時(shí)可以為插槽傳遞數(shù)據(jù)，若存在數(shù)據(jù)，則可稱(chēng)該插槽為作用域插槽。

子組件：

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

父組件：

<template>
  <div class="slotStudy">
    <h2>{{ msg }}</h2>
    <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插槽作用與原理是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！