版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/smalCat/article/details/86140202
slot
在vue中称之为插槽
展示
:
没有使用slot
使用slot
理解:
在组件中,使用
<slot> </slot>
标签进行占位,如下代码
子组件中的templat
<template>
<div class="div">
<slot name='test'>
</slot>
<span>
这个是常规内容第一项
</span>
<slot name='ee'>
</slot>
<span>
这个是常规内容
</span>
</div>
</template>
这里我使用了两个slot标签占位,而且还是具名插槽
占了页面中的两个位置
作用:
插槽位置将会展现我从父组件传过来的demo
在我没传demo之前,父组件是这样
HTML
<template>
<div class="hello">
<Sllot >
</Sllot>
<h1>{{ msg }}</h1>
</div>
</template>
js
<script>
import Sllot from './sllot'
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
components: {
Sllot
}
}
页面
开始在父组件中传入demo
, 在子组件插槽
位置显示
HTML
<template>
<div class="hello">
<Sllot >
<h1 slot='ee'>不好,真的不好</h1> // 这内容将会在 name=ee 的slot位置展示
<h6 slot='test'>不sdfsdf好,真的不好</h6> 这内容将会在 name=test 的slot位置展示
</Sllot>
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
</div>
</template>
js没有变动,就不上了
页面开始变化了
我在子组件Sllot
中传入的demo分别展示在之前我写的slot(插槽
)位置
所以插槽可以让我们更好的布局。
扫描二维码关注公众号,回复:
5683863 查看本文章
它的作用对于在页面局部更改样式非常有效
2.6 之 solt新使用方法(动态绑定
)
最近Vue发布了2.6 ,其中对slot有了新用法
// 我这里直接开始用组件说明
// 一个组件
// 数据
data () {
return {
params: {
name: '雨生',
age: '18'
}
}
}
// ,默认形式
<Hi slot:'{params}'>
<template>
{{params.name}}
{{params.age}}
</template>
</Hi>
// 具名形式,test是组件中slot标签的name值,p标签是我们要填入的内容,
<Hi slot:'test'>
<template>
<p>sdfsdfasdfasdfasfasf</p>
</tempalte>
</Hi>
相差
:
1、slot改为动态指令式 如:slot:test 而这个test可以动态变更,也就是说slot标签的那么是可以动态变更的
2、slot 支持了参数,如:slot:{{params}},可以直接动态变更显示内容