vue自主学习总结，插槽的使用1

vue学习

vue插槽slot的学习

1、默认插槽
插槽的作用简单来说就是：父组件在引用子组件的时候，为了添加部分自定义内容而出现的工具。
假设我们定义了一个子组件child，然后我们在父组件中引用,这一切都是正常的组件引用。但如果我在父组件中引用的时候想要加入一些自定义内容，如：我是父组件自定义内容要怎么办呢？因为我们都知道，在引用的组件标签中加自定义内容渲染时，是会被子组件给覆盖的，那我们这时候要怎么实现自定义内容的显示呢。当然这时候也就轮到了slot的出场了。
我们只需要在定义子组件的模板中，加入，这样我们在父组件中引用child所添加的自定义内容便会显示出来，当然其具体位置，是根据你将slot标签放在child组件中的具体位置来定的。而这便是slot的默认插槽的用法，也是最简单的一种用法。
另外声明一点，父组件引用child时，自定义内容不限制于文本，同时可以引用其他标签等等。实例代码如下：

//子组件定义如下：
<template>
	<div>
		<div>我是子组件的主要内容</div>
		/*这里就是插槽了，将显示父组件在子组件中添加的自定义内容*/
		<slot></slot>
	</div>
</template>

//父组件定义如下：
<child>
	<p class="fa fa-user">hello，我是父组件定义的，但我在这里显示了</p>   //自定义内容
	Your Profile	   //自定义内容	
</child>

如此渲染出来的结果便是：

我是子组件的主要内容
hello，我是父组件定义的，但我在这里显示了
you Profile