vue插槽

1.插槽的用处

1. 组件的插槽也是为了让我们封装的组件更加具有扩展性。

2. 让使用者可以决定组件内容的一些内容到底展示什么。

 

2.匿名插槽

在子组件中直接使用未标名的slot直接接收模板中全部的元素,该插槽有什么元素完全取决于同级有什么元素.

<div id='app'>
        <child>
            <a href="#">这是a标签</a>
            <button>按钮</button>
        </child>
    </div>
    <template id="tmpl">
        <div>
            <slot></slot>
            <h1>标题</h1>
            <p>内容</p>
        </div>
    </template>

此时在页面中会显示 a标签与按钮 ,并且在标题和内容的上方,所以匿名的slot会直接接收所有的模板内元素

 

3.具名插槽

那要是当我并不是需要全部的元素的时候,我想使用特定的那个的时候,我就可以使用name来进行对应元素绑定

具名元素就可以实现一对一的调用与想调用的位置自由化

步骤:

1. 使用具名插槽 只要给slot元素一个name属性即可

2. slot="名字"与下方的name="名字"产生关联

<div id='app'>
        <child>
            <a href="#" slot="link">这是a标签</a>
            <button slot="btn">按钮</button>
        </child>
</div>
    <template id="tmp1">
        <div>
            <slot name="btn"></slot>
            <h1>标签</h1>
            <p>内容</p>
            <slot name="link"></slot>
        </div>
    </template>

 

4.作用域插槽

就是为在组件标签comp中使用comp组件内部的data数据

人话:当我想要在父组件的作用域中使用子组件的方法时我就需要使用slot-scope

步骤:

1. 通过slot标签传到slot所对应的标签内部

2. 在对应的这个标签(button标签)身上书写slot-scope(插槽作用域),值为一个对象

3. 通过 对象名.标签属性 的方式取值

slot-scope="obj" 后面这个obj一般命名为scope

<div id='app'>
        <child>
            <!-- obj即为自定义的对象,用于接收传递而来的自定义参数  -->
   <button slot="btn" slot-scope="obj">按钮{{obj.mynum}} 标题{{obj.title}} </button>   
        </child>
</div>
<template id="tmp1">
        <div>
            <h1>子组件</h1>
             <!--  :mynum="num" 的绑定原理为 :自定义变量="data中的值" -->
            <slot name="btn" :mynum="num" title="插槽作用域"></slot>
        </div>
</template>
<script>
        let child = {
            template: "#tmp1",
            data() {   return {   num: 20,  a: 40
                }}}
        new Vue({
            el: '#app',
            data: {    },
            components: {
                child
            }   })

 

5.作用域插槽的四种不同格式

第一种写法:基本写法

slot-scope="obj" obj这个对象专门接收button这个标签所对应的slot标签身上的标签属性mynum, 作为自己的实例属性

 <button slot="btn" slot-scope="obj">按钮{{obj.mynum}} 标题{{obj.title}}</button>

 

第二种写法:模板基本写法

即为属性直接写在模板(template)上而不是在button中

<template slot="btn" slot-scope="obj">
                <button>按钮{{obj.mynum}} 标题{{obj.title}}</button>
                <p>{{obj.mynum}}</p>
                <p>{{obj.row.date}}</p>
</template>

 

下面两种是2.63版本后新出现的格式

第三种:指令写法

即为直接写在作用域中而里面的元素自然而然就能调用得到

slot="btn" slot-scope="obj" 替换为: v-slot:btn="obj", 写在组件的标签属性的位置

<child v-slot:btn="obj">
     <button>按钮{{obj.mynum}}  标题{{obj.title}}</button>
</child>

 

第四种:指令写法之模板写法

即为缩写与指令写法的结合版

<child>
      <template v-slot:btn="obj">
          <button>按钮{{obj.mynum}}  标题{{obj.title}}</button>
      </template>
</child>