vue插槽作用域

最新推荐文章于 2024-08-01 23:12:12 发布

Misnice

最新推荐文章于 2024-08-01 23:12:12 发布

阅读量282

点赞数

分类专栏： Vue 文章标签： vue插槽作用域 vue插槽

本文链接：https://blog.youkuaiyun.com/Misnice/article/details/107918478

版权

Vue 专栏收录该内容

47 篇文章

订阅专栏

1.先简单介绍一下“组件”和“插槽”的共同点与区别：
它们的共同点都是从上（父）往下（子）传递数据，它们的区别：Prop传递的是组件的属性，而插槽是传递VNode节点。
总结来说，父组件通过 Prop 向子组件传递数据，通过插槽向子组件传递内容。
2.作用域、插槽
作用域插槽是跟上面两者传输数据的方向相反，是下（子）往上（父）传递数据，
我们再回头看看官方的描述：“可从子组件获取数据”，正是说明这种关系。
那么它跟插槽有什么关系呢？因为数据像是“绑定”在子组件的插槽上，
哪个VNode节点插入到该插槽上，那个节点能拿到子组件传递上来的数据，
那么slot-scope属性指定的值，就是我们用于接收数据的变量。

<body>
<div id = "myApp">
	<!-- 组件调用时 one是插槽名-->
     <child>
         <div slot="one" slot-scope="item">
             {{item.user}}
             <p v-for="num in item.data">{{num}}</p>
         {{item}}
         </div>
     </child>
</div>
</body>
<script>
    new Vue({
        el:"#myApp",
        data:{},
        components:{
            child:{
                data(){
                  return {
                      arr:[1,2,3,4]
                  }
                },
                //组件中书写
                template:`
                <div>
                   <slot name="one" :data = "arr" user="用户名"></slot>
                </div>
                `
            }
        }
    })
</script>