获取子组件插槽里面的数组----数据

最新推荐文章于 2022-11-09 14:59:33 发布

shuaishuaizhang8

最新推荐文章于 2022-11-09 14:59:33 发布

阅读量2.3k

点赞数

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

本文链接：https://blog.csdn.net/shuaishuaizhang8/article/details/107634767

版权

vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 获取子组件插槽里面的 数组----数据-->
    <div id="app">
        <comp> </comp>
        <comp> 
            <!-- 在父组件内部使用子组件,通过插槽拿到数据的写法 -->
            <template slot-scope="slot">
                <span v-for="item in slot.data">{{item}}</span>
            </template>
        </comp>

        <comp> 
            <!--父组件替换插槽里面的内容,但是内容还是有子组件提供,,=-------也就是说:子组件可以通过插槽传递数据  -->
            <template slot-scope="slot">
                <span >{{slot.data.join("-")}}</span>
            </template>
        </comp>
          
    </div>
    
    <template id="tem">
        <!-- //在子组件内接收值 -->
        <div>
            <h2>我是子组件</h2>
            <!-- 在子组件内部定义插槽的数据 -->
            <slot :data="list">
                <ul>
                    <li v-for="item in list">{{item}}</li>
                </ul>
            </slot>
        </div>
        
    </template>

    <script src="./vue.js"></script>
    <script>
        const comp={  //创建子组件 
            template:"#tem",  //挂在子组件模板
            props:{ //子组件接受父组件的值
                
            },
            data(){ //必须是一个函数
                return {
                    meesage:'我是社会主义接班人',
                    list:["js编程","编程人生","前端优化","c++","python","java"]
                }
            },
            
            methods: {
              
            }
        }
        const app = new Vue({
            el: '#app',//用于要挂在的元素
            data: {
                what: '你好啊,黄金时代',
            },
            components:{ //挂载子组件到父组件上面
                comp,
            },
            methods: {
                
            },
        });
    </script>
</body>
</html>

记录一下======================================

shuaishuaizhang8

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
获取子组件插槽里面的数组----数据

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <!-- 获取子组件
复制链接

扫一扫