v-slot 插槽用法

時間 2019-12-10

標籤 slot 插槽用法简体版

原文原文鏈接

1、什麼是插槽

Vue官網：Vue 實現了一套內容分發的 API，將<slot>元素做爲承載分發內容的出口。我的理解：插槽就是將定義在父組件內的內容分配到子組件上。css

2、默認插槽

初始實例文件（使用的是html，複製便可執行）html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-slot</title>
		<style>
			body{
				text-align: center;
				line-height: 100px;
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 父組件A -->
			<v-compa>
				{{msg}}
			</v-compa>
		</div>

		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
		<script>
			//子組件
			let CompA = {
				template: "<div><slot></slot></div>",
				data() {
					return {
						msgA: 1
					}
				}
				
			};
			
			//Vue實例
			new Vue({
				el: "#app",
				data: {
					msg: "vue實例"
				},
				components: {
					'v-compa': CompA
				}
			});
		</script>
	</body>
</html>

複製代碼

打開瀏覽器咱們能夠看到vue實例的字樣，該字樣就是從父組件中的內容分發到子組件之中。若是去除子組件中的<slot>標籤頁面就會一片空白，便是子組件渲染時把父組件上的內容也一塊兒渲染了。vue

//子組件
let CompA = {
	template: "<div></div>", //去除<slot></slot>
	data() {
		return {
			msgA: 1
		}
	}
};
複製代碼

3、具名插槽

具名插槽就是至關於key和value同樣，父組件的標籤上要定義v-slot:default屬性（v-slot只能寫在父組件的標籤上），子組件的<slot name="default"></slot>。瀏覽器

//父組件bash

<div id="app">
	<!-- 父組件A -->
	<v-compa v-slot:default>
		{{msg}}
	</v-compa>
</div>
複製代碼

//子組件app

//子組件
let CompA = {
	template: "<div><slot name='default'></slot></div>",
	data() {
		return {
			msgA: 1
		}
	}
};
複製代碼

若是不寫v-slot:default，那麼默認就是v-slot:default,default可已改成別的，好比:v-slot:header,那麼<slot name='header'></slot>，一一對應的。ui

4、做用於插槽

做用於插槽主要是父組件接受子組件slot標籤上的信息。 //父組件spa

<div id="app">
	<!-- 父組件A -->
	<v-compa v-slot:default='props'>
		{{props.msg}}
	</v-compa>
</div>
複製代碼

//子組件code

//子組件A
let CompA = {
	template: "<div><slot name='default' :msg='msgA'></slot></div>",
	data() {
		return {
			msgA: 1
		}
	}
};
複製代碼

//瀏覽器（顯示組件A的msgA的值）component

這裏的做用域插槽跟父子組件之間的通信很像，子組件中經過<slot :msg='msgA'>中的msg來保存子組件中的信息。父組件中經過v-slot:default='props'中的props來保存子組件傳過來的msg。props是一個的對象，不必定是以props命名。

5、總結

本次的筆記很簡單，只是介紹了vue中的v-slot簡單使用，並無作太多的深刻了解，其實在網上看了不少，都是按照官方的說法來寫，因此沒能好好理解。最總的實例文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-slot</title>
		<style>
			body {
				text-align: center;
				line-height: 100px;
				padding: 0;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 父組件A -->
			<v-compa v-slot:default='props'>
				{{props.msg}}
			</v-compa>
		</div>

		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
		<script>
			//子組件A
			let CompA = {
				template: "<div><slot name='default' :msg='msgA'></slot></div>",
				data() {
					return {
						msgA: 1
					}
				}
			};

			//Vue實例
			new Vue({
				el: "#app",
				data: {
					A: "組件A",
				},
				components: {
					'v-compa': CompA
				}
			});
		</script>
	</body>
</html>

複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。