vue的组件插槽,slot ,slot-scope - 前端笔记-vue的组件插槽,插槽的用法就是,将 组件的占位符 里面的内容,元素 。可以继承到组件内部 1.通过 slot slot 标签写在 组件里面 就能继承 ...

学习笔记

乾坤未定,你我皆是黑马
乾坤已定,我便扭转乾坤
首页>> >>vue的组件插槽,slot ,slot-scope - 前端笔记
2020-1-4
分类:

vue的组件插槽,slot ,slot-scope

文章作者:痴迷

vue的组件插槽,插槽的用法就是,将 组件的占位符  里面的内容,元素   。可以继承到组件内部 1.通过<slot><slot>标签写在 组件......

vue的组件插槽,插槽的用法就是,将 组件的占位符  里面的内容,元素   。可以继承到组件内部

1.通过<slot><slot>标签写在 组件里面  就能继承    组件占位符里面的内容,元素
2.可以给 占位符里面的 元素设置 属性  slot=" aa "  , 在组件里面设置 插槽 标签<slot name="aa"></slot>  , 可以接收对应传值
3.可以在 组件里面的插槽<slot ><slot>  (可以通过父传子的方式,添加一个属性把值传给,占位符里面的内容,元素) 。在占位符里面的元素,添加  属性  slot-scope=“值”   (值和父集传过来的值一样) 


<body>
    <!-- //引入vue.js -->
    <script type='text/javascript' src='js/vue.js'></script>
    <div id='app'>
        {{msg}}
        <!-- // lis = list 是传数据给子集 -->
        <son :lis=list>

            <!-- //通过 slot-scope属性 接收值 -->
            <div slot-scope="aa">
                <div>{{aa.l.name}}</div>
            </div>

        </son>
    </div>

    <!-- //js代码 -->
    <script type='text/javascript'>
        //son组件内容
        var son = {
                // 通过props 接收 父集传的 lis数组
                props: ['lis'],
                //模板  循环 lis数组 ,通过slot标签传给子集 每次循环的 循环项
                // (slot是可以接收son标签里面内容的,如果不写,son里面的内容会被替换掉)
                template: `<div>{{s}}
            <p :key="item.id" v-for="item,index in lis" > <slot :l="item" ></slot></p></div>`,
                data() {
                    return {
                        s: '我是son'
                    }
                },
            }
            //vue实例
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                //list数据
                list: [{
                    id: 1,
                    name: '张三',
                    age: 18
                }, {
                    id: 2,
                    name: '李四',
                    age: 19
                }, {
                    id: 3,
                    name: '王五',
                    age: 20
                }, ]
            },
            //创建son组件
            components: {
                son,

            }
        });
    </script>
</body>





×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:前端笔记 » vue的组件插槽,slot ,slot-scope
版权所有:《前端笔记
文章标题:《vue的组件插槽,slot ,slot-scope
除非注明,文章均为 《前端笔记》 原创
转载请注明本文短网址:https://blog.dbsgw.cn/post-37.html

网友评论(0)