vue - 作用域插槽的使用

最新推荐文章于 2024-07-26 13:02:41 发布

非著名奶茶爱好者

最新推荐文章于 2024-07-26 13:02:41 发布

阅读量136

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_46398446/article/details/112594390

版权

vue 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="app">
    <cpn></cpn>

    <!--目的是获取子组件中的planguage-->
    <cpn>
        <div slot-scope="slot"> <!--父组件不能直接访问子组件的数据-->
            <span v-for="item in slot.data">{{item}}-</span>
        </div>

    </cpn>
</div>

<template id="ccc">
    <div>
        <slot :data="planguage"> <!--插槽数据来自子组件中的planguage-->
            <ul>
                <li v-for="item in planguage">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>

<script src="./js/vue.js"></script>
<script>
    /*let(变量)const(常量)*/
    const app = new  Vue({
        el: '#app', //用于挂载要管理的元素
        data: {  //定义数据

        },
        components: {
            cpn: {
                template: '#ccc',
                data() {
                    return {
                        planguage: ['java','c','c++','c#','python']
                    }
                }
            }
        }
    })
</script>

</body>
</html>

总结：
1. 父组件不能直接访问子组件的数据，都是相互独立的。
2. 要在插槽里写:data=" 数据名"
3. 父组件的div里写slot-scope="slot"

非著名奶茶爱好者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue - 作用域插槽的使用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="app"> <cpn></cpn>  <cpn&g
复制链接

扫一扫

专栏目录