vue.js-使用slot插槽分发内容

冷不防 2021-09-15 11:18 383阅读 0赞

最初在 <slot> 标签中的任何内容都被视为备用内容。备用内容在子组件的作用域内编译，并且只有在宿主元素为空，且没有要插入的内容时才显示备用内容。

一、单个插槽

子组件，备用内容在子组件的作用域内编译，并且只有在宿主元素为空时，且没有要插入的内容时才显示备用内容

1.parent.vue

<div id="exp1"> <h1>我是父组件的标题</h1> <v-child> <p>使用slot</p> </v-child> </div> <script> import child from '@/components/child/child' export default { components: { 'v-child':child } } </script>

2.child.vue

<div id="child"> <h2>我是子组件的标题</h2> <slot></slot> </div> <script> export default { } </script>

二、具名插槽：

父：slot="header"   子：<slot name="header"></slot>

1.parent.vue

<div id="exp1"> <h1>我是父组件的标题</h1> <v-child> <h1 slot="header">这是一个页面的标题</h1> <p>主要内容的一个段落</p> <p>主要内容的另外一个段落</p> <p slot="footer">这是一些页脚信息</p> </v-child> </div> <script> import child from '@/components/child/child' export default { components: { 'v-child':child } } </script>

2.child.vue

<div id="child"> <h2>我是子组件的标题</h2> <slot name="header"></slot> <slot></slot> <slot name="footer"></slot> </div> <script> export default { } </script>

![20180522093830386][]

三、作用域插槽：

在父组件的模板里，使用一个Vue自带的特殊组件<template> ，并在该组件上使用scope属性，值是一个临时的变量，存着的是由子组件传过来的prop对象，在下面的例子中我把他命名为props。获得由子传过来的prop对象。这时候，父组件就可以访问子组件在自定义属性上暴露的数据了。

1.parent.vue

<div id="exp1"> <h1>我是父组件的标题</h1> <v-child> <template scope="props" slot="child-ul"> <li class="child-ul">{ { props.text }}</li> </template> </v-child> </div> <script> import child from '@/components/child/child' export default { components: { 'v-child':child } } </script>

2.child.vue

<div id="child"> <h2>我是子组件的标题</h2> <ul> <slot name="child-ul" v-for="item in animal" v-bind:text="item.name"></slot> </ul> </div> <script> export default { data () { return { animal:[ {name:'大象'}, {name:'小狗'}, {name:'小猫'}, {name:'老虎'} ] } } } </script>

![20180522093740370][]

[20180522093830386]: /images/20210813/96c7ec595449460cbad30f3498348909.png
[20180522093740370]: /images/20210813/2849f22a0635490185314f2e7703ba5b.png