Vue作用域插槽(vue2.5淘汰语法和vue3.0支持的语法对比)

砖业洋__

发布于 2023-05-06 20:03:37

3570

发布于 2023-05-06 20:03:37

文章被收录于专栏：博客迁移同步

有了插槽和具名插槽的基础之后，我想如何让大家能够通俗易懂的理解作用域插槽（说实话，刚学这个知识点的时候官方文档我前后看了好多遍都没懂）

接下来的一个例子就是子组件要实现循环显示一个列表，相信百度都能搜到，但是我在这里是为了让大家理解各个参数的意思

不用作用域插槽的情况

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>作用域插槽
        </title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <child>
            </child>
        </div>
        <script> 
            Vue.component('child', {
                data() {
                    return {
                        list: [1, 2, 3, 4]
                    }
                },
                template: `<div>
                                <ul>
                                    <li v-for="item of list">
                                        {{item}}
                                    </li>
                                </ul>
                           </div>`
            })
            var vm = new Vue({
                el: "#app"
            })
        </script>
    </body>
</html>

运行结果

<child>组件可能被很多地方调用，在很多时候列表循环的样式不是<child>所控制的，而是外部控制的。

这里循环渲染的是<li>，由子组件自己指定了，但是外部作用域无法操作，能不能由外部作用域指定呢？比如将数组内容循环渲染到<h1>标签上、渲染到<p>标签上之类的，这都是需要外部来指定如何修改如何渲染，那这们怎么做呢？

当子组件做循环的时候，dom结构、样式应该由外部传递进来的时候就用作用域插槽。

用作用域插槽解决上面问题（Vue2.5旧语法，Vue3.0不再包含）

让插槽内容能够访问子组件中才有的数据是很有用的！

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>作用域插槽
        </title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <child>
                <template slot-scope="myScope">
                    <h1>{{myScope.myItem}}</h1>
                </template>
            </child>
        </div>
        <script> 
            Vue.component('child', {
                data() {
                    return {
                        list: [1, 2, 3, 4]
                    }
                },
                template: `<div>
                                <ul>
                                    <slot v-for="item of list"
                                    :myItem=item>
                                    </slot>
                                </ul>
                           </div>`
            })
            var vm = new Vue({
                el: "#app"
            })
        </script>
    </body>
</html>

slot-scope="myScope"就是我把作用域起个别名叫做myScope

<slot v-for="item of list" :myItem=item></slot>这里的:myItem=item表示通过myItem绑定数据item

外层作用域中{{myScope.myItem}}表示想显示myScope作用域的myItem绑定的数据，就是每次循环的数据。

只要这里用<h1>标签，就会按照这个样式渲染，用<li>就按照li的样式渲染

官方解释这种例子只是作用域插槽的冰山一角。

用作用域插槽解决上面问题（Vue2.6+新语法，Vue3.0支持）

作用域插槽自 2.6.0 起有所更新，在接下来所有的 2.x 版本中，slot-scope 写法仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。

我们来改写上面例子

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>作用域插槽
        </title>
        <script src="https://unpkg.com/vue"></script>
    </head>
    <body>
        <div id="app">
            <child>
                <template #myname="myScope"><!-- #myname等同于v-slot:myname,等同于2.5具名插槽旧语法slot="myname" -->
                    <h1>{{myScope.myItem}}</h1>
                </template>
                <template v-slot="myScope1"><!-- 注意这里是v-slot="myScope1"不是slot="myScope1"，要和具名插槽的旧语法区别开 -->
                    <h2>{{myScope1.myItem}}</h2>
                </template>
            </child>
        </div>
        <script> 
            Vue.component('child', {
                data() {
                    return {
                        list: [1, 2, 3, 4]
                    }
                },
                template: `<div>
                                <ul>
                                    <slot v-for="item of list"
                                    :myItem=item>
                                    </slot>
                                    <slot name="myname" :myItem=list></slot>
                                </ul>
                           </div>`
            })
            var vm = new Vue({
                el: "#app"
            })
        </script>
    </body>
</html>

运行结果：

在上一个例子的基础上需要再解释一下

旧语法slot-scope="myScope"等同于新语法v-slot="myScope"，name默认就是default

#myname="myScope"是v-slot:myname="myScope"的简写，而v-slot:myname是Vue2.5中具名插槽slot="myname"的简写，这里可别绕晕了。可以见我的前一篇Vue中的插槽和具名插槽(vue 2.5已淘汰的语法和vue3.0支持语法对比)，#myname="myScope"就是匹配name为myname的插槽slot，并取别名为"myScope"，可以通过"myScope"去操作slot上绑定的数据

v-slot="myScope1"等同于v-slot:default="myScope1"，而插槽<slot>不写name则默认name="default"，所以也可以缩写成#default="myScope1"。匹配默认插槽不能直接#，至少加上#default，否则就会如下报错