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

目录

不用作用域插槽的情况

用作用域插槽解决上面问题(Vue2.5旧语法,Vue3.0不再包含)

用作用域插槽解决上面问题(Vue2.6+新语法,Vue3.0支持)


 

前篇:Vue中的插槽和具名插槽(vue 2.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>
            </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,否则就会如下报错

记得这个<slot>标签上的name一定要小写!否则渲染不出来。

有人会问,应该是数组在前,列表在后呀,记得渲染顺序以插槽<slot>的位置为准,不是根据父作用域的template顺序判断,这里子组件的第一个<slot>绑定的是for循环的每条数据,第二个绑定的才是list!

 

关注、留言,我们一起学习。

 

===============Talk is cheap, show me the code================

 

 

 

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页