插槽slot

API地址：https://cn.vuejs.org/v2/guide/components-slots.html (opens new window)

插槽

<div id="root">
    <child> <!-- 组件标签 -->
        <h1>hello</h1>
    </child>
</div>

<script type="text/javascript">
    Vue.component('child', { // 子组件
        template: '<div><slot></slot></div>'
    })

    var vm = new Vue({
        el: '#root'
    })
</script>

上面代码中，组件标签内的h1是要插入子组件内部的元素，子组件内使用slot标签接收父组件插入的h1标签。

默认值

Vue.component('child', {
    template: '<div><slot>默认值</slot></div>'
})

子组件slot标签内可以添加默认值，它只会在父组件没有传入内容的时候被渲染。

具名插槽

注意

自 2.6.0 起有所更新。使用 slot attribute 的语法已废弃。

<div id="root">
    <child>
        <div slot="header">header</div> <!--旧语法 使用template标签或其他标签都可以-->
        <div slot="footer">footer</div>
    </child>
</div>

<script type="text/javascript">
    Vue.component('child', {
        template: `<div>
                        <slot name="header"></slot>
                        <div>content</div>
                        <slot name="footer"></slot>
                    </div>`
    })

    var vm = new Vue({
        el: '#root'
    })
</script>

上面代码中，组件标签内有两个元素，分别添加了slot属性赋予不同的值，子组件内分别有两个slot插槽，添加了对应的name属性，用于分别接收父组件传入的内容。

提示

自 2.6.0 起，使用v-slot指令代替slot attribute 的语法。

<div id="root">
    <child>
        <template v-slot:header> <!--新语法 只能使用template标签-->
            <h1>标题</h1>
        </template>
        <p>内容</p>
        <template v-slot:footer>
            <p>页脚</p>
        </template>
    </child>
</div>
<script type="text/javascript">
	Vue.component('child', {
		template: `<div>
						<header>
						   <slot name="header"></slot>
						</header>
						<main>
						  <slot></slot>
						</main>
						<footer>
						  <slot name="footer"></slot>
						</footer>
					</div>`
	})

    var vm = new Vue({
        el: '#root'
    })
</script>

自2.6.0版本起，具名插槽由原来的slot标签属性改为v-slot指令，例v-slot:header。子组件内仍然是在slot插槽标签添加name属性用于分别接收内容。未具名的插槽接收未使用v-slot指定的内容。

另外，具名插槽同样可以使用默认值。

注意 v-slot 只能添加在 <template 上 (只有一种例外情况 (opens new window))，这一点和已经废弃的 slotattribute (opens new window)不同。

作用域插槽

注意

自 2.6.0 起有所更新。使用 slot-scope attribute 的语法已废弃。

<div id="root">
    <child>
        <template slot-scope="dataObj"> <!--可使用其他标签，但注意其他标签将会被带到插槽里面-->
            <li>{{dataObj.dataItem}}</li>
        </template>
    </child>
</div>
<script type="text/javascript">
	Vue.component('child', {
        data(){
            return {
                list: [1, 2, 3, 4]
            }
        },
        template: `<div>
						<ul>
							<slot
								v-for="item of list"
								:dataItem=item
							>
							</slot>
						</ul>
					  </div>`
    })

    var vm = new Vue({
        el: '#root'
    })
</script>

上面代码中，组件标签内需要使用template标签并且设置slot-scope属性 用于接收子组件内传递的值，template标签内的li标签是传入插槽的元素，dataObj.dataItem数据由子组件内提供。子组件内通过v-for循环插入父组件提供的li标签，并且通过:dataItem=item把每个item数据传递出去。

子组件提供数据，父组件中接收数据，可以对数据处理并插入到元素，然后把元素放入子组件插槽。

作用：

数据由子组件提供，但渲染什么元素由父组件决定，并且可以对数据做二次处理。

提示

自 2.6.0 起。使用v-slot代替 slot-scope attribute 的语法。

为了让 user 在父级的插槽内容中可用，我们可以将 user 作为 <slot> 元素的一个 attribute 绑定上去：

<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

绑定在 <slot> 元素上的 attribute 被称为插槽 prop。现在在父级作用域中，我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字：

<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。

<div id="root">
    <child>
        <template v-slot:default="dataObj"> <!--default是默认具名，可省略。但有多个插槽时不能省略。-->
            <li>{{dataObj.dataItem}}</li>
        </template>
    </child>
</div>

<script type="text/javascript">
	Vue.component('child', {
        data(){
            return {
                list: [1, 2, 3, 4]
            }
        },
        template: `<div>
						<ul>
							<slot
								v-for="item of list"
								:dataItem=item
							>
							</slot>
						</ul>
					  </div>`
    })

    var vm = new Vue({
        el: '#root'
    })
</script>

具名插槽的缩写

跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

<base-layout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：

<!-- 这样会触发一个警告 -->
<current-user #="{ user }">
  {{ user.firstName }}
</current-user>

如果你希望使用缩写的话，你必须始终以明确插槽名取而代之：

<current-user #default="{ user }">
  {{ user.firstName }}
</current-user>