求详解v-slot指令的书籍

Question

具体问题是我们现在需要写一章v-slot的文档,因为在vue.js实战这本书中,第7.4章里面写了这个使用slot分发内容,现在slot废弃了,就需要写一份v-slot的文档,我看了前几年那些书,发现都没有v-slot这个指令的详解,就想问问各个大佬推荐几本详解了v-slot这个指令的书籍

Answer 1

1、具名插槽
有时候我们希望在指定的位置输出我们的子元素，这时候具名插槽就排上了用场。

//组件调用时
<MyFooter v-red :age.sync="age">
  <template v-slot:footer>
  //这里v-slot：后边的值与组件内的slot的name属性对应，也就是插槽的名称。
      <div>list</div>
  </template>
</MyFooter>
//书写组件时
<template>
    <div>
        {{age}}
        <div>
            <slot name='footer' />
            //这里name的值就是这个插槽的名称。
        </div>
    </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
最后我们会在我们想要的位置将我们的元素放置。

2、作用域插槽
作用域插槽的主要作用是在书写插槽内容时可以获取到插槽作用域的值。

//组件调用
 <ul>
   <myli :title="val.title"
   >
   <template v-slot:footer="message">
       <div>{{message.aa}}</div>
   </template>
   </myli>
 </ul>
 //书写组件时
 <template>
    <li>
        <slot name='footer' :aa="title">
        </slot>
    </li>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
注意事项：
这里需要注意的是message是所有你绑定属性的集合，也就是你写的：aa=“title”会当做message的属性来实现。当然这里message可以换做其它的名称。

3、总结
v-slot的出现是为了代替原有的slot和slot-scope
简化了一些复杂的语法。
一句话概括就是v-slot ：后边是插槽名称，=后边是组件内部绑定作用域值的映射。

看一下这篇博文，望采纳，谢谢