vue.js-使用slot插槽分發內容

最初在 <slot> 標籤中的任何內容都被視為備用內容。備用內容在子元件的作用域內編譯，並且只有在宿主元素為空，且沒有要插入的內容時才顯示備用內容。

一、單個插槽

子元件，備用內容在子元件的作用域內編譯，並且只有在宿主元素為空時，且沒有要插入的內容時才顯示備用內容

1.parent.vue

<div id="exp1">
	<h1>我是父元件的標題</h1>
    <v-child>
		<p>使用slot</p>
	</v-child>
</div>
<script>
import child from '@/components/child/child'
export default {
	components: {
		'v-child':child
	}
}
</script>

2.child.vue

<div id="child">
	<h2>我是子元件的標題</h2>
	<slot></slot>
</div>
<script>
export default {
}
</script>

二、具名插槽：

父：slot="header"   子：<slot name="header"></slot>

1.parent.vue

<div id="exp1">
	<h1>我是父元件的標題</h1>
    <v-child>
		<h1 slot="header">這是一個頁面的標題</h1>
		<p>主要內容的一個段落</p>
		<p>主要內容的另外一個段落</p>
		<p slot="footer">這是一些頁尾資訊</p>
	</v-child>
</div>
<script>
import child from '@/components/child/child'
export default {
	components: {
		'v-child':child
	}
}
</script>

2.child.vue

<div id="child">
	<h2>我是子元件的標題</h2>
	<slot name="header"></slot>
	<slot></slot>
	<slot name="footer"></slot>
</div>
<script>
export default {
}
</script>

三、作用域插槽：

 在父元件的模板裡，使用一個Vue自帶的特殊元件<template> ，並在該元件上使用scope屬性，值是一個臨時的變數，存著的是由子元件傳過來的prop物件，在下面的例子中我把他命名為props。獲得由子傳過來的prop物件。這時候，父元件就可以訪問子元件在自定義屬性上暴露的資料了。

1.parent.vue

<div id="exp1">
	<h1>我是父元件的標題</h1>
    <v-child>
		<template scope="props" slot="child-ul">
			<li class="child-ul">{{ props.text }}</li>
		</template>
	</v-child>
</div>
<script>
import child from '@/components/child/child'
export default {
	components: {
		'v-child':child
	}
}
</script>

2.child.vue

<div id="child">
	<h2>我是子元件的標題</h2>
	<ul>
		<slot name="child-ul" v-for="item in animal" v-bind:text="item.name"></slot>
	</ul>
</div>
<script>
export default {
	data () {
		return {
			 animal:[
                    {name:'大象'},
                    {name:'小狗'},
                    {name:'小貓'},
                    {name:'老虎'}
                ]
		}
	}
}
</script>