vue slot scope使用_vue template 中 slot-scope/scope 的使用

在vue 2.5.0+ 中***slot-scope***替代了

scope

template 的使用情形為，我們已經封裝好一個元件，預留了插槽，使用 的插槽

首先 我們的建立一個元件

元件很簡單有一個 slot,slot有兩個屬性 a=123,b=msg

<template>
    <div>
        <div>下面是一個slot</div>
        <slot a="123" b="msg" ></slot>
    </div>
</template>
           

接下來我們引入元件，并使用元件,引入的元件名 為mysolt，并使用元件

然後使用 template ,并使用scope/slot-scope,

<div>
	<mysolt>
		   <template scope="msg">
                <div>下面是solt的props 調用</div>
                <div>{{msg}}</div>
                <div>{{msg.a}}</div>
                <div>{{msg.b}}</div>
            </template>
	</mysolt>
</div>
           

其實就是 template 通過scope/slot-scope 屬性 調用元件 slot 的屬性，以達到可以調用元件屬性實作複雜的嵌套；

執行個體中 我使用 msg 來重命名 slot 的屬性對象，即 msg 為slot 的{a:‘123’,b:‘msg’}, 就可以通過使用msg 在template 中使用slot的屬性

（注意：目前層 如果有data已經聲明過 msg,它們之間互不幹擾，template 的msg 以slot 的為準）