javascript - 关于vue组建的作用域插槽，做了一下里面的例子，还是不太懂

问题描述

问 题

<div id="mylist">
        <my-awesome-list :items="items">
            <template slot="item" scope="props">
                <li class="my-fancy-item">
                    {{props.text}}
                </li>
            </template>
        </my-awesome-list>
    </div>

<script>
    var child={
        **props:["items"]**,
        template:'\
            <ul>\
               <slot neme="item"\
                     v-for="item in items"\
                     :text="item.text">\
               </slot>\
            </ul>\
        '
    }
    new Vue({
        el:"#mylist",
        data:{
            items:[
                {text:'这是作用域插槽具有代表性的实例'}                
            ]
        },
        components:{
            'my-awesome-list':child
        }
    })
</script>

这里面我无法渲染出li标签，我有点懵。
请问，这里的props是不能将父组件的items里的数据传递给子组件吗？
Li标签如何渲染出来呢？
另外这里template标签里的scope属性的props是和我父组件的props属性是同样的东西吗？

解决方案

name 拼写错了，这样子改过来能正常显示。scoped 的 props文档讲得挺清楚了。作用域插槽

 var child = {
    props:["items"],
    template:'\
        <ul>\
           <slot name="item"\
                 v-for="item in items"\
                 :text="item.text">\
           </slot>\
        </ul>\
    '
}

这篇关于javascript - 关于vue组建的作用域插槽，做了一下里面的例子，还是不太懂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！