Vue中的插槽和作用域插槽

我会带着你远行 2022-12-16 09:03 269阅读 0赞

重点：

作用域 插槽

# **。如果需要用一句话去总结`作用域插槽`，那就是`在父组件中访问子组件的数据`，或者从`数据流向`的角度来讲就是`将 子组件 的数据传递到  父组件`。** #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70 1][]

工作中遇到的例子：

父组件通过子组件穿过来的值判断  slot 处按钮是不是显示

子组件：

![20210609102031793.png][]

父组件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70 2][]

1、Vue中插槽的作用和使用方法

定义一个名child子组件，为该子组件添加内容应该在子组件的template中定义，直接在父组件的<child>标签中定义的内容不会被渲染，如下例。

<div id="root">
            <child>
                需要插槽才能渲染的内容
                <p>Dell</p>
                <p>Lee</p>
            </child>
        </div>
        <script>
            Vue.component('child',{
                template: `<div>
                                <p>这是子组件中正常渲染的内容</p>                            
                             </div>`
                }
            )
            var vm=new Vue({
                el:'#root'
            })
        </script>

结果：

![70][]

使用插槽就能解决这个问题。在子组件template中加入<slot>元素占位，便能渲染父组件<child>标签下的内容，对上例的子组件修改为：

父组件没有提供插槽内容   
     <div id="root">
            <child></child>
        </div>
        <script>
            Vue.component('child',{
                template:'<div><slot>defalut value</slot></div>
                }
            )
            var vm=new Vue({
                el:'#root'
            })
        </script>

![70 1][]

父组件提供插槽内容   
     <div id="root">
            <child>
               <p>Hello</p>
            </child>
        </div>
        <script>
            Vue.component('child',{
                template:'<div><slot>defalut value</slot></div>
                }
            )
            var vm=new Vue({
                el:'#root'
            })
        </script>

![70 2][]

3、具名插槽

当需要多个插槽时，可以使用<slot>的特性：name。这个特性可以用来定义额外的插槽

使用方法如下例

<div id="root">
            <child>
                <header slot="header">header</header>
                <footer slot="footer">footer</footer>
            </child>
        </div>
        <script>
            Vue.component('child',{
                template:`<div>
                                <slot name="header">default header</slot>
                                <div>content</div>
                                <slot name="footer">default footer</slot>
                            </div>`
                }
            )
            var vm=new Vue({
                el:'#root'
            })
        </script>

结果：

![70 3][]

4、作用域插槽

可以先看一个例子，以便更好的理解作用域插槽的作用

在子组件中使用v-for创建一个列表循环，然后在父组件中通过子组件标签child调用，如下例。

<div id="root">
            <child></child>
            <child></child>
        </div>
        <script>
            Vue.component('child',{
                data: function(){
                    return {
                        list:[1,2,3,4]
                    }
                },
                template: '<div><ul><li v-for="value in list">{
       {value}}</li></ul></div>',
            })
            var vm=new Vue({
                el: '#root'
            })
        </script>

结果：

![70 4][]

调用了两次child组件，因为调用的是同一个子组件，所以显示的内容完全一样。如何在每次调用时能有各自的渲染效果？这就是作用域插槽的用武之地。

作用域插槽就是父组件在调用子组件的时候给子组件传了一个插槽，这个插槽为作用域插槽，该插槽必须放在template标签里面，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式。通过下列展示作用域插槽的使用方式：

<div id="root">
            <child>
                <template slot-scope="props">
                    <li>{
       {props.value}}</li><--!定义使用渲染方式-->
                </template>
            </child>
            <child>
                <template slot-scope="props">
                    <h1>{
       {props.value}}</h1>
                </template>
            </child>
        </div>
        <script>
            Vue.component('child',{
                data: function(){
                    return {
                        list:[1,2,3,4]
                    }
                },
                template: `<div>
                                <ul>
                                    <slot v-for="value in list" :value=value>//使用slot占位
                                    </slot>
                                </ul>
                            </div>`
            })
            var vm=new Vue({
                el: '#root'
            })
        </script>

结果

![70 5][]

通过上例可知，使用作用域插槽后，两次调用子组件可以定义不同的渲染方式。

slot-scope

如果一个 JavaScript 表达式在一个函数定义的参数位置有效，那么这个表达式实际上就可以被 `slot-scope` 接受。

![20201019155603291.png][]

[vue官网 插槽值得看][vue_]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70]: /images/20221123/527e7c6c842949aebc27a1c4c2b9a10d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70 1]: /images/20221123/447af8ae2bba44baa60870554a316850.png
[20210609102031793.png]: /images/20221123/075f69e4d13d4335bc4e1796c5c9188c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmduaW5namluZzg3_size_16_color_FFFFFF_t_70 2]: /images/20221123/78e669e624394dad80a183d5508b9872.png
[70]: /images/20221123/e83a5d634dd54b0f88ecdb89ce012ae6.png
[70 1]: /images/20221123/2a24d408901d47fa8dd76ead176b9308.png
[70 2]: /images/20221123/9d586cd3ec0b4452b52c83be5a37f970.png
[70 3]: /images/20221123/f2cb384f04e0434085fe798c8a21e1a1.png
[70 4]: /images/20221123/f7a44284b63143feba6e0adb022accd5.png
[70 5]: /images/20221123/82207fd746a54f5eb164c9b3513eb00e.png
[20201019155603291.png]: /images/20221123/a79e6852ca784addb64dcccc86141e23.png
[vue_]: https://cn.vuejs.org/v2/guide/components-slots.html