掌握Vue.js插槽技巧-优快云博客

分发插槽

已知现在存在一个组件，我们已经知道往里面传递数据会呈现的模样，但是现在，我希望呈现出来的模样由我自己来决定，即自定义，此时就需要我们使用插槽slot。

插槽 slot

我们自己定义了一个子组件，之后我们会在父组件里面调用这个子组件，这时，当我们希望在父组件页面里面给这个子组件里面添加内容时，我们会这样做：

// 父组件页面
<div>
	<child>
		这是我们希望添加内容的地方
	</child>
</div>

// 子组件模版
<template>
	<span> 这里是子组件内容填充的地方 </span>
</template>

当我们什么都不做时，显示：

这里是子组件内容填充的地方

我们添加的内容没有显示出来，当然了，因为子组件没有那玩意。此时就是插槽大显身手的时候了。

// 子组件模版修改版本
<template>
	<span> 这里是子组件内容填充的地方 </span>
	<slot> </slot>
</template>

添加了组件，告诉父组件，子组件内允许你增加东东，可以分发内容，此时界面显示：

这里是子组件内容填充的地方
这是我们希望添加内容的地方

具名插槽

上面的例子是插入了一个内容，当我们需要插入很多项不同的内容，并且希望他们相互不会干扰，这时候我们就可以为每个插槽命名，这样就可以一一对应了。

// 父组件页面
<div>
	<child>
		<div v-slot='header'>这是我们希望header添加内容的地方</div>
		<div v-slot='footer'>这是我们希望footer添加内容的地方</div>
	</child>
</div>

// 子组件模版修改版本
<template>
	<span> 这里是子组件内容填充的地方 </span>
	<slot name='header'> </slot>
	<slot name='footer'> </slot>
</template>

这里是子组件内容填充的地方
这是我们希望header添加内容的地方
这是我们希望footer添加内容的地方

作用域插槽

上面两个插槽实际上就是在子组件里面添加一点父组件希望的内容，这个内容的实际数据以及样式都是父组件提供的。

作用域插槽就是我们希望在子组件里面添加一些内容，但是这个内容的样式是父组件提供，而数据data是访问子组件数据的。这个数据绑定就是依靠 slot-scoped。

在子组件里面，在slot标签上绑定子组件里面的对象，这样在父组件里面，利用下面的语句，其中header是插槽的名字，子组件绑定的数据就在这个插槽里面，利用{{header.user}}便可以访问user对象。

// 父组件页面
<child>
  <template slot-scope="user">
    <div>
      <span v-for="item in user.data">{{item}}</span>
    </div>
  </template>
</child>

// 子组件模版修改版本
<template>
	<span> 这里是子组件内容填充的地方 </span>
	<slot :data = data> </slot>
</template>

data(){
	data: [
		{
			name: '111',
			age: 11
		},
		{
			name: '222',
			age: 22
		}
	]
}