【vue】组件的使用（4）使用插槽 Slot ，以及slot-scope作用域插槽

[Kelichao]

Slot插槽

使用特殊的 元素作为原始内容的插槽。

Slot的使用

• 如果子组件是如下代码片段

<div>
  <h2>我是子组件的标题</h2>
  <slot>
   我是默认内容
  </slot>
  <!--name为对应标志位-->
  <slot name="head">
   我是默认head内容
  </slot>

</div>

• 子组件在父组件写法如下

<!-- 键值对中间没有内容，则slot显示为 “我是默认内容。 ”-->
<keyboard :total.sync="vinInput" v-on:sure="getCarInfo"></keyboard>

<!-- 键值对中间有内容，则slot显示为 “<div>123321</div><div>222222222222</div> ”-->
<keyboard :total.sync="vinInput" v-on:sure="getCarInfo">
    <div>123321</div>
    <div slot="head">222222222222</div>
</keyboard>

作用域插槽slot-scope的使用

• 作用是将传入子组件的数据，在使用处重新获得引用,elemtnt-ui中的例子：表格格子中添加标签

子组件

<div>
	<h3>这里是子组件</h3>
	<slot :data="data2"></slot>
</div>
<script>
data() {
	return {
	    data2: ['zhangsan', 'lisi', 'wanwu', 'zhaoliu', 'tianqi', 'xiaoba']
},
</script>

父组件处

<keyboard :total.sync="vinInput" v-on:sure="getCarInfo">
       <!-- 使用处只需添加 slot-scope="props"-->
	<template slot-scope="user">
		<div class="tmpl3">
			 <!-- <span>{{user}}</span> -->
			<span v-for="item in user.data">{{item}}</span>
		</div>
	</template>
</keyboard>

template循环引用报错以及解决办法

• Duplicate presence of slot "up" found in the same render tree - this will likely cause render errors.
• 解决父组件用到子组件的时候出现循环引用所导致的报错解决办法添加slot-scope="{}"
• 注意需要添加在父组件

<template slot="up" slot-scope="{}">