本文實例講述了vue插槽slot的簡單理解與用法。分享給大家供大家參考，具體如下：

vue中插槽的使用非常廣泛，本文就插槽的使用和理解簡單總結(jié)。

從字面理解插槽是預(yù)先插入一個代碼空間，用于后期塞入數(shù)據(jù)。

插槽分類

匿名插槽 ------------------ 匿名的代碼空間

具名插槽 ------------------ 帶有命名的代碼空間

作用域插槽 ------------------- 帶有數(shù)據(jù)的代碼空間

插槽使用示例

匿名插槽

說明在組件中先定義預(yù)留的代碼空間，組件在使用時直接寫入代碼

<template> <div class='child'> <h3>這里是子組件</h3> <slot></slot> </div></template>

使用：

<template> <div class='father'> <h3>這里是父組件</h3> <child> <div class='tmpl'> <span>菜單1</span> <span>菜單2</span> <span>菜單3</span> <span>菜單4</span> <span>菜單5</span> <span>菜單6</span> </div> </child> </div></template>

具名插槽

預(yù)先在組件中定義一個帶有名稱的代碼空間，使用組件時用：slot綁定名稱

<template> <div class='child'> // 具名插槽 <slot name='up'></slot> <h3>這里是子組件</h3> // 具名插槽 <slot name='down'></slot> // 匿名插槽 <slot></slot> </div></template>

使用：

<template> <div class='father'> <h3>這里是父組件</h3> <child> //插槽up <div slot='up'> <span>菜單1</span> <span>菜單2</span> <span>菜單3</span> <span>菜單4</span> <span>菜單5</span> <span>菜單6</span> </div> //插槽down <div slot='down'> <span>菜單-1</span> <span>菜單-2</span> <span>菜單-3</span> <span>菜單-4</span> <span>菜單-5</span> <span>菜單-6</span> </div> //匿名插槽 <div class='tmpl'> <span>菜單->1</span> <span>菜單->2</span> <span>菜單->3</span> <span>菜單->4</span> <span>菜單->5</span> <span>菜單->6</span> </div> </child> </div></template>

作用域插槽 （有數(shù)據(jù)，但放開了渲染）

在組件中預(yù)先定義一個帶有數(shù)據(jù)資源的代碼空間，使用組件時可以直接使用代碼空間中的數(shù)據(jù)

定義

<template> <div class='child'> <h3>這里是子組件</h3> // 作用域插槽 <slot :data='data'></slot> </div></template>

export default { data: function(){ return { data: [’zhangsan’,’lisi’,’wanwu’,’zhaoliu’,’tianqi’,’xiaoba’] } }}

使用

<template> <div class='father'> <h3>這里是父組件</h3> <!--第一次使用：用flex展示數(shù)據(jù)--> <child> <template slot-scope='user'> <div class='tmpl'> <span v-for='item in user.data'>{{item}}</span> </div> </template> </child> <!--第二次使用：用列表展示數(shù)據(jù)--> <child> <template slot-scope='user'> <ul> <li v-for='item in user.data'>{{item}}</li> </ul> </template> </child> <!--第三次使用：直接顯示數(shù)據(jù)--> <child> <template slot-scope='user'> {{user.data}} </template> </child> <!--第四次使用：不使用其提供的數(shù)據(jù), 作用域插槽退變成匿名插槽--> <child> 我就是模板 </child> </div></template>

總結(jié)：

匿名插槽和具名插槽的功能是 預(yù)留插入代碼的空間；

作用域插槽是提供數(shù)據(jù)資源，預(yù)留代碼渲染邏輯空間。

希望本文所述對大家vue.js程序設(shè)計有所幫助。