vue值插槽小记

最新推荐文章于 2023-07-13 14:14:48 发布

星辰志

最新推荐文章于 2023-07-13 14:14:48 发布

阅读量283

点赞数

本文链接：https://blog.csdn.net/jaquechen/article/details/97258474

版权

看了那么久的插槽文档突然觉得插槽好鸡肋啊！！！留着这部分代码后面再研究吧。插槽无非就是让子组件在父组件拥有了编译代码的能力，但是数据依旧使用的是子组件的，即便是作用域插槽访问的数据还是依旧是自身作用域的数据。可以在父组件写，那样只会让父组件代码显得更加沉重，还不如分开写清晰可见。自我了解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <h3>作用域插槽</h3>
    <div>
        <div id="slot-scope">
            <h3>{{slotContent}}</h3>
            <h3>{{accessData}}</h3>
            <current-user>
                <template v-slot:default="slotProps">
                    {{ slotProps.user.firstName }}
                </template>
            </current-user>
            <h3>{{backUpContent}}</h3>
        </div>
    </div>
</body>
    <script>
        Vue.component('current-user',{
            props: [],
            template:`
                <div>
                    <span>
                        <slot v-bind:user="user">
                                {{ user.lastName }}
                        </slot>
                    </span>
                </div>
            `,
            data(){
                return{
                    user:{
                        lastName:'我的',
                        firstName:'对着呢',
                     }
                }
            }
        })
        new Vue({
            el:'#slot-scope',
            data:{
                slotContent:'让插槽内容访问子组件中才有的数据如<current-user>组件',
                backUpContent:'为插槽设置一个具体的后备内容是很有用的，它只会在|-|没有|-|提供内容的时候被渲染'+
                '后备被放置在<slot></slot>标签内，只有父级组件使用子组件并且不为插槽提供内容的时候后备内容才会被渲染',
                accessData:'作用域无非就是父级和子级对数据的访问控制，而作用域插槽相当于prop的用法，父级直接给子组件'+
                '传值，子组件拿数据去展示。而不同的是，prop的数据是父级给的，作用域插槽数据是子组件提供的',
            }
        })
    </script>
</html>

星辰志

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue值插槽小记

看了那么久的插槽文档突然觉得插槽好鸡肋啊！！！留着这部分代码后面再研究吧。插槽无非就是让子组件在父组件拥有了编译代码的能力，但是数据依旧使用的是子组件的，即便是作用域插槽访问的数据还是依旧是自身作用域的数据。可以在父组件写，那样只会让父组件代码显得更加沉重，还不如分开写清晰可见。自我了解。<!DOCTYPE html><html lang="en"><hea...
复制链接

扫一扫