20.組件-插槽---(vue入門 文檔學習記錄)

插槽

有的時候我們需要向模板裏面插入文字,活着其他的東西,我們如何做呢?這時候,就需要插槽來實現了.就相當於,組件給你留了一塊自己動手去填的地方,下面先上代碼:

<div id="app-8">
			<navigation-link url="/profile">
				Your Profile
			</navigation-link>
		</div>
		<script type="text/javascript">
			
			Vue.component("navigation-link", {
				props:["url"],
				template: '<a v-bind:href=\"url\"> <slot></slot> </a>'
			})
			new Vue({
				el: "#app-8"
			})
		</script>

先看組件:

組件名:navigation-link

自定義屬性:url

模板:是一個連接,綁定的連接用url屬性傳入

最後一個slot標籤,表示插槽的位置,在html中使用組建時,當我們在組件標籤中加入一些東西的時候,就相當於加在了在模板中的位置

總結:
想要動態的從組件標籤傳遞參數,屬性,需要在組件中聲明prop,如果需要在html中添加額外的任何東西(顯式的)也可以是html元素等,就需要插槽了.