slot的用法
1.插槽渲染父组件种引用子组件,标签内写入的内容将被分发到子组件的slot标签中父组件:<strong>1.插槽渲染</strong><div><slot-view>窗外的麻雀,在电线杆上多嘴</slot-view></div>子组
·
1.插槽渲染
父组件种引用子组件,标签内写入的内容将被分发到子组件的slot标签中
父组件:
<strong>1.插槽渲染</strong>
<div>
<slot-view>窗外的麻雀,在电线杆上多嘴</slot-view>
</div>
子组件SlotView.vue:
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {};
</script>
2.具名插槽
父组件种若使子组件指定的插槽显示对应的内容,可以在父组件引入的子组件种使用slot属性指定子组件要显示的内容,子组件插槽使用name属性,值与父组件slot属性值对应,父组件未指定slot的内容将显示在子组件未指定name的插槽中。
父组件
<strong>2.具名插槽</strong>
<div>
<slot-view2>
<template slot="header">
<strong>Here is header</strong>
</template>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<template slot="footer">
<strong>Here's footer</strong>
</template>
</slot-view2>
</div>
子组件SlotView2.vue
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {};
</script>
3.将slot使用在普通元素上
使用具名插槽,父组件中除了在template中使用slot属性外,还可以直接在html标签中使用,直接渲染成对应标签
父组件:
<strong>3.将slot使用在普通元素上</strong>
<div>
<slot-view3>
<h1 slot="header">Here might be a page title</h1>
<p>A paragraph for the main content.</p>
<p>And another one.</p>
<p slot="footer">Here's some contact info</p>
</slot-view3>
</div>
子组件SlotView3.vue
<template>
<div>
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
<script>
export default {};
</script>
4.插槽设置默认内容
在子组件的slot标签中设置内容可以作为默认内容,若父组件插槽传入则使用传入的内容
父组件
<strong>4.插槽设置默认内容</strong>
<div>
<code>显示默认内容:</code>
<slot-view4></slot-view4>
<code>显示覆盖内容:</code>
<slot-view4>
提交
</slot-view4>
</div>
子组件SlotView4.vue
<template>
<div>
<button type="submit">
<slot>Submit</slot>
</button>
</div>
</template>
<script>
export default {};
</script>
5.作用域插槽
子组件中的数据需要循环遍历在插槽中,可以使用作用域插槽,在父组件中引入子组件作用域
父组件
<strong>5.作用域插槽</strong>
<div>
<slot-view5>
<!-- 将 `scope` 定义为插槽作用域的名字 -->
<template slot-scope="scope">
{{ scope.todo.text }}
</template>
</slot-view5>
</div>
子组件SlotView5.vue
<template>
<div>
<ol>
<li v-for="todo in todos" :key="todo.id">
<slot :todo="todo">{{ todo.text }}</slot>
</li>
</ol>
</div>
</template>
<script>
export default {
data(){
return {
todos:[
{
id:1,
text:"first",
},
{
id:2,
text:"second",
}
]
}
}
};
</script>
更多推荐
已为社区贡献18条内容
所有评论(0)