vue slot插槽使用個人理解
阿新 • • 發佈:2019-01-27
最近專案不忙,看了看vue,看到了slot,練習了下,與大家分享下,希望有用~
個人理解:用法等同於“佔位符”,佔據一定的“位置”,進行不同的回顯,可以設定預設值,效果類似於v-if,但是功能更豐富
slot用法一(基礎用法)
子元件程式碼設定如下:
<template>
<div>
<slot>預設</slot>
</div>
</template>
<script>
export default {
}
</script>
父元件程式碼設定如下:
<template> <div class='users'> <!-- 放置子元件 --> <Child></Child> </div> </template> <script> import Child from '../components/child.vue'; export default { components:{ Child }, } </script>
頁面回顯如下:
子元件child中新增slot佔位符,設定預設值,在父元件中引用渲染子元件佔位符回顯預設內容;
在父元件中給子元件標籤內寫入內容,案例程式碼如下:
<Child>
<!-- 寫入內容 -->
<el-button>
測試
</el-button>
</Child>
在寫入一個按鈕節點後,頁面回顯如下:
子節點中的slot內容被父節點內容所替代;
總結:此時slot被作為佔位符所使用,無內容時回顯預設內容,當有內容時回顯內容,效果有點類似於input的placeholder屬性的效果;
slot用法二(多個slot同時使用)
子元件程式碼設定如下:
<template>
<div>
<slot>預設</slot>
<slot>預設</slot>
<slot>預設</slot>
</div>
</template>
<script>
export default {
}
</script>
頁面回顯如下:
但是此時控制檯會有如下警告:
來自有道翻譯的解釋:在同一渲染樹中發現的插槽“預設”的重複存在-這可能會導致渲染錯誤。
此時用slot的屬性name來設定額外的插槽;
<template>
<div>
<slot name='test1'>預設</slot>
<slot name='test2'>預設</slot>
<slot name='test3'>預設</slot>
</div>
</template>
頁面回顯如下:
這是因為定義了slot的name名稱後在使用時也要新增相應的配置,制定渲染的插槽(sloat標籤);
父元件程式碼設定如下:
<template>
<div class='users'>
<!-- 放置子元件 -->
<Child>
<!-- 寫入內容,通過slot屬性指定對應的插槽 -->
<el-button slot='test2'>
測試
</el-button>
</Child>
</div>
</template>
<script>
import Child from '../components/child.vue';
export default {
components:{
Child
},
}
</script>
頁面回顯如下:
第二個插槽(slot標籤)被dom節點所覆蓋,第一個和第三個不變;
總結:此時slot被作為可指定的佔位符所使用,slot標籤通過設定name屬性進行區分,在父元件呼叫子元件時通過給子元件設定slot屬性的方法設定作用的slot;
ps:以上就是我對slot的理解,不足之處歡迎評論指正交流~