最近项目不忙,看了看vue,看到了slot,练习了下,与大家分享下,希望有用~
个人理解:用法等同于“占位符”,占据一定的“位置”,进行不同的回显,可以设置默认值,效果类似于v-if,但是功能更丰富
slot用法一(基础用法)
子组件代码设置如下:
<template>
<div>
<slot>默认</slot>
</div>
</template>
<script>
export default {
}
</script>
父组件代码设置如下:
<template>
<div class='users'>
<!-- 放置子组件 -->
<Child></Child>
</div>
</template>
<script>
import Child from '../components/child.vue';
export default {
components:{
Child
},
}
</script>
页面回显如下:
子组件child中添加slot占位符,设置默认值,在父组件中引用渲染子组件占位符回显默认内容;
在父组件中给子组件标签内写入内容,案例代码如下:
<Child>
<!-- 写入内容 -->
<el-button>
测试
</el-button>
</Child>
在写入一个按钮节点后,页面回显如下:
子节点中的slot内容被父节点内容所替代;
总结:此时slot被作为占位符所使用,无内容时回显默认内容,当有内容时回显内容,效果有点类似于input的placeholder属性的效果;
slot用法二(多个slot同时使用)
子组件代码设置如下:
<template>
<div>
<slot>默认</slot>
<slot>默认</slot>
<slot>默认</slot>
</div>
</template>
<script>
export default {
}
</script>
页面回显如下:
但是此时控制台会有如下警告:
来自有道翻译的解释:在同一渲染树中发现的插槽“默认”的重复存在-这可能会导致渲染错误。
此时用slot的属性name来设置额外的插槽;
<template>
<div>
<slot name='test1'>默认</slot>
<slot name='test2'>默认</slot>
<slot name='test3'>默认</slot>
</div>
</template>
页面回显如下:
这是因为定义了slot的name名称后在使用时也要添加相应的配置,制定渲染的插槽(sloat标签);
父组件代码设置如下:
<template>
<div class='users'>
<!-- 放置子组件 -->
<Child>
<!-- 写入内容,通过slot属性指定对应的插槽 -->
<el-button slot='test2'>
测试
</el-button>
</Child>
</div>
</template>
<script>
import Child from '../components/child.vue';
export default {
components:{
Child
},
}
</script>
页面回显如下:
第二个插槽(slot标签)被dom节点所覆盖,第一个和第三个不变;
总结:此时slot被作为可指定的占位符所使用,slot标签通过设置name属性进行区分,在父组件调用子组件时通过给子组件设置slot属性的方法设置作用的slot;
ps:以上就是我对slot的理解,不足之处欢迎评论指正交流~