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元素等,就需要插槽了.