如何在vue中使用具名插槽

今天就跟大家聊聊有關如何在vue中使用具名插槽，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

具有名字的插槽slot使用 中的 "name" 屬性綁定元素

注意：

1，如果沒有匹配到 則放到匿名的插槽中

2，具名插槽的渲染順序，完全取決于模板，而不是取決于父組件中元素的順序

vue的匿名插槽（默認插槽）

父組件

<div>
 <myslot>我是剛剛</myslot>
</div>

子組件

<div>
 <slot><slot>
</div>

vue的具名插槽

父組件

<div>
 <myslot>
  <template #one>豬豬是一只大肥貓</template>
  <template #two>通通是一個大屁眼子</template>
  <template #three>咪咪是沒心沒肺的小混蛋</template>
  我是剛剛
 </myslot>
</div>

子組件

<div>
 <slot name="one"></slot>
 <slot><slot>
 <slot name="two"></slot>
 <slot name="three"></slot>
</div>

渲染出來（大致順序）即為

vue的作用域插槽

大白話解釋作用域插槽：父組件可以通過插槽讀到子組件對應插槽所帶的數據
父組件

<div>
	<myslot>
		<template #oneData="oneData">
			<div>{{oneData.one.message}}</div>
		</template>
		<template #two>通通是一個大屁眼子</template>
		<template #three>咪咪是沒心沒肺的小混蛋</template>
		我是剛剛
	</myslot>
</div>

子組件

<div>
 <slot name="one" :data='one'></slot>
 <slot><slot>
 <slot name="two"></slot>
 <slot name="three"></slot>
</div>

<script>
 export default {
  data() {
   return {
    one: {
     message: '這是子組件所帶的數據message',
       },
   };
  },
 }
</script>

代碼優化

<div>
 <myslot>
  <template #oneData="{oneData}">
   <div>{{oneData.message}}</div>
  </template>
  <template #two>通通是一個大屁眼子</template>
  <template #three>咪咪是沒心沒肺的小混蛋</template>
  我是剛剛
 </myslot>
</div>

子組件

<div>
 <slot name="one" :oneData='one'></slot>
 <slot><slot>
 <slot name="two"></slot>
 <slot name="three"></slot>
</div>

<script>
 export default {
  data() {
   return {
    one: {
     message: '這是子組件所帶的數據message',
       },
   };
  },
 }
</script>

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

看完上述內容，你們對如何在vue中使用具名插槽有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。