作用域插槽slot-scope在vue中的用法

插槽slot分為：“匿名插槽”、“具名插槽”、“作用域插槽”；

“作用域插槽”是需要在插槽slot上綁定資料的。然後元件模闆根據slot上綁定的資料進行操作。

<div id="app">
		<slot-tab>
			<template slot-scope="uesr">//slot-scope="user"就是插槽作用域的名字，是自己定義的。
				<ul>
					<li v-for="item in uesr.doc">{{item}}</li>//user.doc就是取作用域中的doc資料。
				</ul>	
			</template>
		</slot-tab>
	</div>
           

或者這樣弄：（将doc進行解構）

<div id="app">
		<slot-tab>
			<template slot-scope="{doc}">//slot-scope="{doc}"直接将slot綁定的資料直接解構然後應用。
				<ul>
					<li v-for="item in doc">{{item}}</li>//此時的資料doc就是綁定的doc
				</ul>	
			</template>
		</slot-tab>
	</div>
           

Vue.component('slot-tab',{
		data:function (){
			return {
				doc: {
					title:'i am a solt',
					contion: 'i want to use the slot'
				}
			}
		},
		template:`<div><h2>noise popular people population public pub </h2><slot v-bind:doc="doc"></slot></div>`//v-bind:doc="doc"就是插槽綁定的資料。
	})

var vm = new Vue({
	el:'#app',
	data: {}
})
           

總結：

1、要在模闆中的slot标簽上綁定資料v-bind:dd=“dd”。

2、要在使用元件時的template标簽上定義作用域slot-scope=“aa”；

3、使用資料時要作用域.資料(aa.dd)

或者利用解構的文法：

2、要在用元件時的template标簽上解構資料slot-scope="{dd}";(是一組大括号)；

3、直接使用綁定的資料dd；