Vue之Componet之作用域slot(030)_其它

Vue之Componet之作用域slot

1.元件內有插槽，且插槽內有預設值，不用作用域插槽時，會按元件原樣展示。完整程式碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../js/vue.js"></script>
		<title>slot02</title>
	</head>
	<body>
		<!--例項-->
		<div id="app">
			<child></child>
		</div>
		<!--子元件template,且slot內有預設內容-->
		<template id="childTemplate">
			<slot>
				<div>
				{{firstName}}-{{lastName}}
				</div>
			</slot>
		</template>
		<script>
			//定義子元件
			Vue.component("child", {
				template: "#childTemplate",
				data() {
					return {
						firstName: "li",
						lastName: "san"
					}
				}
			})
			//root
			new Vue({
				el: "#app"
			})
		</script>
	</body>
</html>

執行結果：

Vue之Componet之作用域slot(030)

如果想改變插槽原來顯示樣式就要用到作用域插槽。更改程式碼：

在子元件的模板裡自定義屬性用來繫結資料。

<!--子元件template,且slot內有預設內容-->
		<template id="childTemplate">
			<slot :fn="firstName" :ln="lastName">
				<div>
				{{firstName}}-{{lastName}}
				</div>
			</slot>
		</template>

在父元件模板裡，用v-slot=“name” 來接收子元件的資料。名字自定義。

<div id="app">
			<child>
				<template v-slot="name">
				<div>
				<span>your firstName is :{{name.fn}}</span>
				<span>your lastName is :{{name.ln}}</span>
				</div>					
				</template>
			</child>
		</div>

執行結果：

Vue之Componet之作用域slot(030)

總結：
1.在子元件的模板裡自定義屬性用來繫結資料。
2.在父元件模板裡，用v-slot=“name” 來接收子元件的資料。名字自定義。
3.如果是具名插槽，s-slot:插槽名=自定義變數。

Vue之Componet之作用域slot(030)

Vue之Componet之作用域slot

相關推薦