這篇文章給大家分享的是有關vue插槽slot怎么用的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)建站是專業(yè)的石樓網(wǎng)站建設公司，石樓接單;提供成都網(wǎng)站建設、網(wǎng)站設計,網(wǎng)頁設計,網(wǎng)站設計,建網(wǎng)站,PHP網(wǎng)站建設等專業(yè)做網(wǎng)站服務;采用PHP框架,可快速的進行石樓網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

前言

Vue的slot插槽，可以從字面意思來了解用途，占用占坑的意思，既然是占坑肯定是先占坑后面有其他具體的內(nèi)容來替換代替。根據(jù)slot的應用場景可以分為匿名slot和具名slot。

一、個人理解及插槽的使用場景

剛開始看教程我的疑惑是為什么要用插槽，它的使用場景是什么，很多解釋都是“父組件向子組件傳遞dom時會用到插槽”，這并不能很好的解決我的疑惑。既然你用了子組件，你為什么要給她傳一些dom，直接去定義復用的子組件不就好了。后來想想覺得一個復用的組件在不同的地方只有些許變化，如果去重寫子組件是很不明智的一件事，當然也可以將不同之處都寫在子組件里，然后通過父組件傳來的標識進行選擇顯示。其實質(zhì)是對子組件的擴展，通過slot插槽向組件內(nèi)部指定位置傳遞內(nèi)容，即將<slot></slot>元素作為承載分發(fā)內(nèi)容的出口；

二、用于理解的例子

目前還沒接觸到使用插槽解決實際問題很好的例子，只能這樣去為了理解插槽而用，可能并沒有很好的利用到插槽的好處。

在父組件定義想要傳入子組件作為插槽的內(nèi)容，App.vue

<template>
 <div id="app">
 <div>
 <input type="text" v-model="info">
 <button @click="handleClick">添加</button>
 </div>
 <todolist v-for="item in list" :key="item" :message="msg">
 <template v-slot:item="itemProps" >
 <!-- tips1:<span>即為插槽內(nèi)容
　　　　　　　　tips2:item是插槽的名字，為具名插槽，可對應插入到子組件中具體的插槽位置
  tips3:itemProps可以獲取到子組件（即插槽 prop）傳出來的狀態(tài)（值），
 　　　插槽 prop 的對象命名為 itemProps，可任意命名，itemProps變量存在于 <template> 作用域中
 　-->
 <span :>{{item}}</span>
 </template>
 </todolist>
 </div>
</template>

<script>

 import todolist from './components/todolist.vue';
export default {
 name: 'App',
 components: {
 todolist
 },
 data(){
 return {
 msg: '4-2-05',
 info: '',
 list: [],
 }
 },
 methods: {
 handleClick() {
 // 獲取到input輸入的東西，然后加入到數(shù)組中
 this.list.push(this.info);
 this.info = ''
 }
 },
}
</script>

<style>
</style>

在子組件利用<slot></slot>元素作為承載分發(fā)內(nèi)容的出口，父組件的插槽內(nèi)容將在其中顯示，todolist.vue

<template>
 <div>
 {{message}}
 <li class="item">
 <input type="checkbox" v-model="checked">
 <slot name="item" v-bind="{checked}" ></slot>
 <!--插槽內(nèi)容能夠訪問子組件中才有的數(shù)據(jù)是很有用的,又因為父級模板里的所有內(nèi)容都是在父級作用域中編譯的；子模板里的所有內(nèi)容都是在子作用域中編譯的
 所以得想辦法獲取到子組件的數(shù)據(jù)。-->
 <!--給子組件綁定一個動態(tài)參數(shù),checked作為一個 <slot> 元素的特性綁定上去,綁定在 <slot> 元素上的特性被稱為插槽 prop-->
 </li>
 </div>
</template>

<script>
 export default {
 props: ['item','message'],
 // 因為父組件在插槽內(nèi)容里使用item， 即此句代碼<span>{{item}}</span>
 // 相當于需要傳遞給子組件的內(nèi)容，也就是通常的父子組件通信，所以在子組件需要通過props來獲取
 data() {
  return {
  checked: false,
  }
 },
 created() {
  console.log(this.message);
 }
 }
</script>

<style scoped>
 .item {
 color: red;
 }
 li{
 list-style: none;
 }
</style>

三、具體知識點

1、具名插槽

上面的例子只使用了一個slot插槽，但有時我們在一個組件里可能會多處使用插槽，我們希望在不同的插槽處插入不同的內(nèi)容，此時便需要進行區(qū)分，<slot> 元素有一個特殊的特性：name。這個特性可以用來定義插槽的名字，在向具名插槽提供內(nèi)容的時候，我們可以在一個 <template> 元素上使用

 v-slot 指令，并以 v-slot 的參數(shù)的形式寫出插槽的名稱，使其一一對應。

 <slot name="header"></slot>
 <slot name="content"></slot>
 <slot ></slot>
//一個不帶 name 的 <slot> 出口會帶有隱含的名字“default”。

2、作用域插槽

為了使父組件的插槽內(nèi)容可以使用子組件的數(shù)據(jù)，可以在 <slot> 元素上綁定想要傳遞的數(shù)據(jù)，此特性被稱為插槽 prop。同時在父級作用域中，給 v-slot 帶一個值來定義我們提供的插槽 prop 的名字，便可獲取到。但此內(nèi)容只在 <template>作用域內(nèi)可用。

四、自 2.6.0 起有所更新的語法變化

1、帶有slot特性的具名插槽

2、帶有slot-scope特性的作用域插槽

五、突發(fā)奇想的調(diào)換

因為看到一個別人寫的關于slot的帖子，他應該是寫錯了插槽在子父組件的內(nèi)容，這也就相當于從子組件傳一個插槽內(nèi)容給父組件。仔細想想這思路有問題，既然都引用了子組件，父組件便可以訪問到子組件的所有內(nèi)容，現(xiàn)在卻非要通過插槽來傳遞，多此一舉。

然后我就試了一下將插槽內(nèi)容卸載子組件里，果然出現(xiàn)了報錯，如下：

  - <template v-slot> can only appear at the root level inside the receiving the component（slot的只能出現(xiàn)在接受組件的根級別）

也就是只能在父組件使用。

感謝各位的閱讀！關于“vue插槽slot怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前題目：vue插槽slot怎么用-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://aaarwkj.com/article44/ccoshe.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護、網(wǎng)站改版、網(wǎng)站設計公司、微信公眾號、小程序開發(fā)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)