初識 Vue（19）---（Vue 中使用插槽(slot)）

weixin_34253539發表於2018-07-28
Vue

Vue 中使用插槽(slot)

案例：子元件中的一部分內容是根據父元件傳遞來的 DOM 來進行顯示

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中使用插槽(slot)</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<child content='<p>Dell</p>'></child>
	</div>	
	<script>
	Vue.component('child',{
		props:['content'],
		template:'<div><p>hello</p><div v-html="this.content"></div></div>'
		
	})

	var vm = new Vue({
		el:'#root',
		
		})
	</script>
</body>
</html>

輸出：

存在問題：1.通過 content 傳值，想直接使用裡面的 <p> ,必須在外面包裹一層 DIV；

2.用這種方法向子元件傳值時，當傳遞的數值過多時會造成程式碼可讀性很差

 

子元件中的一部分內容是根據父元件傳遞來的 DOM 來進行顯示的時候，可以使用插槽的方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中使用插槽(slot)</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<child>
			<p>Dell</p>  
		</child>
	</div>	
	<script>
	Vue.component('child',{
		props:['content'],
		//獲取插槽內容
		template:'<div> <p>Hello</p><slot></slot></div>'
		
	})

	var vm = new Vue({
		el:'#root',
		
		})
	</script>
</body>
</html>

輸出：

slot 還可以設定預設樣式

<body>
	<div id="root">
		<child>
			 
		</child>
	</div>	
	<script>
	Vue.component('child',{
		props:['content'],
		//獲取插槽內容
		template:'<div> <p>Hello</p><slot>預設內容</slot></div>'
		
	})

輸出：

功能：輸出，其中 header 部分和 footer  部分均由父元件傳入

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中使用插槽(slot)</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<body-content>
			  <div class="header" slot='header'>header</div>
			  <div class="footer" slot='footer'>footer</div>
		</body-content>
	</div>	
	<script>
	Vue.component('body-content',{

		//獲取插槽內容
		template:'<div>
                  <slot name='header'></slot>
                   <div class='content'>content</div>
                    <slot name='footer'></slot>
                    </div>'
		
	})

	var vm = new Vue({
		el:'#root',
		
		})
	</script>
</body>
</html>

給每一個插槽給定具體的名字稱為 具名插槽（可以有多個，也可以有預設值，但插槽只能有一個）

輸出：

具名插槽 預設值

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue 中使用插槽(slot)</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<body-content>
	
			  <div class="footer" slot='footer'>footer</div>
		</body-content>
	</div>	
	<script>
	Vue.component('body-content',{

		//獲取插槽內容
		template:'<div>
                  <slot name='header'>default header</slot>
                   <div class='content'>content</div>
                    <slot name='footer'></slot>
                    </div>'
		
	})

	var vm = new Vue({
		el:'#root',
		
		})
	</script>
</body>
</html>

輸出：

相關文章