前言

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

注意：

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

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

vue的匿名程式設計客棧插槽（預設插槽）

父元件

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

子元件

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

vue的具名插槽

父元件

<div>
 <myslot>
  <template #one>豬豬是一隻大肥貓</template>
  <template #two>通通是一個大屁眼子</template>
  <template #thwww.cppcns.com
 
ree>咪咪是沒心沒肺的小混蛋</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>
 <sl
 
程式設計客棧ot><slot>
 <slot name="two"></slot>
 <slot name="three"></slot>
</div>

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

程式碼優化

&www.cppcns.comlt;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具名插槽內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！