vue具名插槽的基本使用實例

更新時間：2021年05月23日 12:44:44 作者：yh8899abc

Vue 中的插槽在開發(fā)組件的過程中其實是非常重要并且好用的。下面這篇文章主要給大家介紹了關于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的作用域插槽

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

<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: '這是子組件所帶的數(shù)據(jù)message',
       },
   };
  },
 }
</script>

代碼優(yōu)化

<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: '這是子組件所帶的數(shù)據(jù)message',
       },
   };
  },
 }
</script>

總結

到此這篇關于vue具名插槽基本使用的文章就介紹到這了,更多相關vue具名插槽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

淺談vue引用靜態(tài)資源需要注意的事項
今天小編就為大家分享一篇淺談vue引用靜態(tài)資源需要注意的事項，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
vue結合axios實現(xiàn)restful風格的四種請求方式
這篇文章主要介紹了vue結合axios實現(xiàn)restful風格的四種請求方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-06-06
淺談VUE監(jiān)聽窗口變化事件的問題
下面小編就為大家分享一篇淺談VUE監(jiān)聽窗口變化事件的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue中使用router全局守衛(wèi)實現(xiàn)頁面攔截的示例
這篇文章主要介紹了vue中使用router全局守衛(wèi)實現(xiàn)頁面攔截的示例，幫助大家維護自己的項目，感興趣的朋友可以了解下
2020-10-10
使用webpack手動搭建vue項目的步驟
這篇文章主要介紹了從零使用webpack手動搭建vue項目的步驟，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2023-03-03
vue3的setup語法如何自定義v-model為公用hooks
這篇文章主要介紹了vue3的setup語法如何自定義v-model為公用hooks，文章分為兩個部分介紹，簡單介紹vue3的setup語法如何自定義v-model和如何提取v-model語法作為一個公用hooks
2022-07-07
vue框架制作購物車小球動畫效果實例代碼
最近在學習前端制作了一個購物車小球的動畫效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧
2019-09-09
VUE事件處理之@click用法示例代碼
在Vue進行前端開發(fā)中事件處理是必不可少的功能,下面這篇文章主要給大家介紹了關于VUE事件處理之@click用法的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-05-05
vue3.0中使用nextTick方式
這篇文章主要介紹了vue3.0中使用nextTick方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04
vue中使用el-dropdown方式
這篇文章主要介紹了vue中使用el-dropdown方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08