Vue 之 slot 插槽简单使用

在Vue中定义组件,没什么大不了的. 我们可以定义一些组件.

比如 : 定义一个 panel 组件

Vue.component('panel',{
 template:'#panel-tpl',
 data() {
 return {
 title:'这是title',
 content:'Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus pariatur ea molestiae alias, illum sed porro neque unde repudiandae. A, perspiciatis vel inventore unde modi reiciendis esse quasi commodi minima!',
 bottom:'查看详细'
 }
 }
 })

 <template id='panel-tpl'>
 <div class="panel">
 <div class="title">{{title}} </div>
 <div class="content"> {{content}}</div>
 <div class="bottom"> {{bottom}}</div>
 </div>
 </template>

长这模样.

15446899410400.jpg

在 Vue 中,一个组件内部可能会引用另外一个组件.也没什么大不了的.

比如,在定义一个图片组件.

Vue.component('img-panel',{
 template:'<div><img src="./md/img/1.jpg" width="200px" height="auto" ></div>',
 })

 <img-panel></img-panel>

它长这样.

15446900991371.jpg

两个组件(panel & img-panel)都是全局组件.

我希望在 panel 组件里 div.content 里使用 img-panel 组件来填充.

我可能会这么写.

 <template id='panel-tpl'>
 <div class="panel">
 <div class="title">{{title}} </div>
 <div class="content"><img-panel></img-panel></div>
 <div class="bottom"> {{bottom}}</div>
 </div>
 </template>

两个组件强耦合了在一起，长这样:

15446910436003.jpg

现在问题来了

panel 组件的 div.content 这个部分,我是希望用内容填充的. 而不想管内容是什么.

但是这里的代码,我把 img-panel 组件写死到里面去了. 如果后期要换的话,我就得修改这里的代码.

 <template id='panel-tpl'>
 <div class="panel">
 <div class="title">{{title}} </div>
 <!-- <div class="content"><img-panel></img-panel></div> -->
 <!-- 不要 img-panel 了,还是显示自己的数据属性叭!!!! -->
 <div class="content">{{content}}</div>
 <div class="bottom"> {{bottom}}</div>
 </div>
 </template>

slot 插槽

slot 插槽可以在组件的内容预留一个位置.类似于 placeholder.

在需要的使用,把你需要的任何内容填充进去.

于是,我在 panel里放几个 slot ,只管挖坑,不管填坑(但设置了默认值)

<template id='panel-tpl'>
 <div class="panel">
 <div class="title">
 <slot name='title'>{{title}}</slot>
 </div>
 <div class="content">
 <slot name='content'>{{content}}</slot>
 </div>
 <div class="bottom">
 <slot name='bottom'> {{bottom}}</slot>
 </div>
 </div>
 </template>

 Vue.component('title-slot',{
 template:`<div style='backgroundColor:red;height:40px'></div>`
 })

 Vue.component('content-slot',{
 template:`<div style='background:yellow;height:100px;'></div>`
 })
 Vue.component('bottom-slot',{
 template:`<div style='background:black;height:40px'></div>`
 })

然后在使用这个 panel 组件时,把需要的坑填进去.

<div id='app'>
 <panel>
 <div slot='title'><title-slot></title-slot></div>
 <div slot='content'><content-slot></content-slot></div>
 <div slot='bottom'><bottom-slot></bottom-slot></div>
 </panel>
 </div>

注意:我这里修改的是panel组件使用的位置,而不是定义的位置.

效果如下：

15446909419580.jpg

简单总结:默认插槽和具名插槽

在组件内部任意地方使用 <slot name='value'></slot> 标签挖坑.
可以在其内部放置任意数据当成是默认值.{{title}} {{content}} {{bottom}}
- 挖坑语法(组件定义): <slot name='slotname'>默认值</slot>
- 填坑语法(组件使用): <div slot='slotname'>任意内容(字符串,数据,其他组件等)</div> .. 注意,使用的使用是里用 <div slot> 而不是 <slot>
最重要的是,我们可以利用slot,事先不建立组件和组件之间的依赖关系,完全利用 slot 这个抽象层,把坑挖好即可. 也就是说,子组件和父组件并不是强耦合的关系.

作用域插槽.

作用插槽的用法,不像前面那样纯粹. 前面两者如果仅仅是父组件挖坑,父组件在填坑.

对于作用于插槽来说,是子组件提供数据,父组件拿到数据(子组件向组件传递数据的另一种形式),然后在决定如何去展示.

父组件和子组件强耦合了在一起.

所以,你定义子的子组件需要向外传递数据,结构就是类似下面这种.

<template>
 <div class="child-box">
 <h1>这是child-Component</h1>
 <!-- 方式四:作用于插槽,子组件通过slot标签往外暴露数据,父组件拿到数据,可以根据实际需求绝对如何去渲染 -->
 <slot :hobbies="hobbies"></slot>
 </div>
</template>

<script>
export default {
 name: "Child",
 data() {
 return {
 hobbies: ["写代码", "看书"],
 };
 },
};
</script>

父组建事先也不需要挖坑.当用到的子组件是slot-scope时,拿到数据,决定如何渲染即可.

<template>
 <div class="parent-box">
 <h1>这是parentComponent</h1>
 <!-- 方式一: 不使用slot,直接把child组件嵌套进来 === 强耦合 -->
 <!-- <Child /> -->
 <!-- 方式二: 使用默认插槽! -->
 <!-- 默认名vm.$solts.default 具体内部填充什么内容,由父组件决定. -->
 <!-- <slot></slot> -->
 <!-- 方式三: 使用具名插槽,也就是给插槽加个名字. vm.$slots.slotName -->
 <!-- <slot name="child"></slot> -->

 <!-- 方式四:作用于插槽,子组件通过slot标签往外暴露数据,父组件拿到数据,可以根据实际需求去决定如何去渲染.还是强耦合了在一起 -->
 <!-- 我可以使用span来显示数据 -->
 <child>
 <template slot-scope="{ hobbies }">
 <span v-for="(txt, idx) in hobbies" :key="idx">{{ txt }}</span>
 </template>
 </child>
 <!-- 我可以使用ol来显示数据 -->
 <child>
 <template slot-scope="{ hobbies }">
 <ol>
 <!--  -->
 <li
 v-for="(txt, idx) in hobbies"
 :key="idx"
 @click.stop="getDataFromChild(txt)"
 >
 {{ txt }}
 </li>
 </ol>
 </template>
 </child>
 </div>
</template>

<script>
import Child from "./Child.vue";
export default {
 name: "Parent",
 components: {
 Child, // 为什么说是强耦合? 因为在代码级别,parent就必须依赖child组件!
 },

 methods: {
 // 父组件也可以获取从子组件传递过来的数据,这也是方式之一.
 getDataFromChild(data) {
 console.log(data);
 },
 },

 created() {
 globalThis.vm = this;
 },
};
</script>