关于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属性是同样的东西吗?

阅读 6.5k
3 个回答

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

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

clipboard.png 初学者 一起研究

1:这里面我无法渲染出li标签,我有点懵。

模版里name写错了

2:请问,这里的props是不能将父组件的items里的数据传递给子组件吗?

https://cn.vuejs.org/v2/guide...
在父级中,具有特殊属性 scope 的 <template> 元素,表示它是作用域插槽的模板。scope 的值对应一个临时变量名,此变量接收从子组件中传递的 prop 对象。

3:另外这里template标签里的scope属性的props是和我父组件的props属性是同样的东西吗?

和子组件的props属性是一个对象。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题